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>

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>

<span class=“title” id=“dpicd-title”>经过我们的努力，把知识与财富传递到您的</span>

<ul>

</a>

</li>

</a>

</li>

</a>

</li>

</a>

</li>

&n
bsp; <img src=“../image/8_4.png” />

</a>

</li>

</a>

</li>

</ul>

</div>

</body>

补充：网页制作,jquery