文章给各位介绍一款DGallery官方式非流行图片切换用于比较传统的网站，有需要了解的朋友可参考。
代码如下
复制代码
<style>
.dpicd{width:273px;height:232px;color:#FFFFFF;font-size:12px;position:relative;}
.dpicd .cover{width:273px;height:70px;position:absolute;z-index:999998;background-color:#000;opacity:0.5;bottom:0;}
.dpicd .ctn{width:273px;height:70px;position:absolute;z-index:999999;bottom:0;}
.dpicd .ctn .title{height:26px;display:block;line-height:26px;text-align:center;}
.dpicd .ctn .picture{height:44px;}
.dpicd .ctn .picture ul{list-style:none outside none;margin:0;padding:0;}
.dpicd .ctn .picture ul li{width:58px;height:39px;display:block;float:left;position:relative;background:none repeat scroll 0 0 #FFFFFF;margin-left:5px;}
.dpicd .ctn .picture ul .dpicd-pic-ctn{display:none;}
.dpicd .ctn .picture ul li .dpicd-pic-cover{width:58px;height:39px;position:absolute;background:none repeat scroll 0 0 #000;opacity:0.5;}
.dpicd .ctn .picture ul li a{display:block;overflow:hidden;font-size:0;cursor:pointer;}
.dpicd .ctn .picture ul li a img{border:0;}
.dpicd .ctn .picture ul li .dpicd-pic img{width:56px;height:37px;border:0;margin:1px;}
.dpicd .ctn .picture ul .btn{width:32px;height:32px;background-color:transparent;margin-top:3px;}
.dpicd .ctn .picture ul .btn a{width:32px;height:32px;}
</style>
<script type=“text/javascript” src=“../jquery.js”></script>
<script type=“text/javascript” src=“../dgallery.js”></script>
<script>
function DPicd(){
DGallery.call( this ); //继承
var tar = this.getTarget(); //获取目标 就是加入到某个DIV
var container, title, cover, btn, li; //节点 容器 标题 遮罩层 按钮 按钮容器;
var tl; //标题集合
var show = function( index ){ //显示某个图片 这里原理是:
var k = parseInt( index / 3 ) * 3; ///只显示3个图片 其他的都隐藏 这样就能够 永远保持3个图片作为选择图片 而更多的图片将隐藏
if( k + 3 >= li.length ) k = li.length – 3
li.hide();
for( var i = k; i < k + 3; i ++ ) $(li[i]).show();
}
var focus = function( c ){ //设置当前焦点按钮
cover.css( ‘opacity’, 0.5 );
c.css( ‘opacity’, 0 );
}
var setTitle = function( index ){ //设置title
title.html( tl[index] );
}
this._init = this.init; //构造函数
this
.init = function( opt ){
this._init( opt );
tl = this.getTitles();
container = $(‘#dpicd-ctn’);
title = $(‘#dpicd-title’);
cover = $(‘.dpicd-pic-cover’);
btn = $(‘.dpicd-pic’);
li = $(‘.dpicd-pic-ctn’);
$(‘#dpicd-pic-prev’).click(function(){ //前按钮绑定方法
var cur = self.getCurrent() – 1;
cur = self.loop( cur )
self.stop();
self.prev();
focus( $(cover.get( cur )) );
setTitle( cur );
self.play();
show( cur );
});
$(‘#dpicd-pic-next’).click(function(){ //后按钮绑定方法
self.stop();
self.next();
self.play();
});
cover.each(function( k, el ){ //遮罩层 因为会变黑 所以必须加上遮罩层 遮罩层可能在 低版本IE6 显示不了 透明效果
var me = $(this); //那种IE6 可能 是石器时代的 一般IE6 都可以看到效果 所以 不敢包说 所有IE6都适用
me.hover(function(){
self.stop();
self.show( k );
setTitle( k );
focus( me );
}, function(){
self.play();
})
})
//初始化
focus( $(cover.get(0)) );
show( 0 );
setTitle( 0 );
}
//设置默认参数
this.setDefault({
‘play’ : ‘auto’,
‘effect’ : ‘fade’,
‘time’ : 3000,
‘before’ : function(){ //这里必须设定他的方法 因为焦点按钮必须跟随图片
var cur = this.getNext(); //改变而改变
focus( $(cover.get(cur) ) );
setTitle( cur );
show( cur );
}
})
//还是加句 下面这东西 必须的
return this.jready( arguments );
}
DPicd( ‘.dpicd’, ’8_1.jpg|8_2.png|8_3.jpg|8_4.png’, ‘../image/’, ‘link1|link2|link3|link4′, ‘tl1|tl2|tl3|tl4′ );
</script>
</head>
<body>
<div class=“dpicd”>
<div class=“cover”></div>
<div class=“ctn” id=“dpicd-ctn”>
<span class=“title” id=“dpicd-title”>经过我们的努力，把知识与财富传递到您的</span>
<div class=“picture”>
<ul>
<li class=“btn”>
<a href=“javascript:void(0);” id=“dpicd-pic-prev”>
<img src=“../image/prev_1.png” />
</a>
</li>
<li class=“dpicd-pic-ctn”>
<a href=“javascript:void(0);” class=“dpicd-pic”>
<div class=“dpicd-pic-cover”></div>
<img src=“../image/8_1.jpg” />
</a>
</li>
<li class=“dpicd-pic-ctn”>
<a href=“javascript:void(0);” class=“dpicd-pic”>
<div class=“dpicd-pic-cover”></div>
<img src=“../image/8_2.png” />
</a>
</li>
<li class=“dpicd-pic-ctn”>
<a href=“javascript:void(0);” class=“dpicd-pic”>
<div class=“dpicd-pic-cover”></div>
<img src=“../image/8_3.jpg” />
</a>
</li>
<li class=“dpicd-pic-ctn” style=“display:none;”>
<a href=“javascript:void(0);” class=“dpicd-pic”>
<div class=“dpicd-pic-cover”></div>
&n
bsp; <img src=“../image/8_4.png” />
</a>
</li>
<li class=“btn”>
<a href=“javascript:void(0);” id=“dpicd-pic-next”>
<img src=“../image/next_1.png” />
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
