DGallery官方式非流行图片切换用于比较传统的网站

来源:转载

文章给各位介绍一款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> 

 


分享给朋友:
您可能感兴趣的文章:
随机阅读: