完善JQuery圖片切換效果的簡(jiǎn)潔實(shí)現(xiàn)_

1、完善JQuery圖片切換效果的簡(jiǎn)潔實(shí)現(xiàn)_ 下面我就為大家?guī)?lái)一篇完善JQuery圖片切換效果的簡(jiǎn)潔實(shí)現(xiàn)。我覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。 css： body font-family:Microsoft Yahei; body,ul,li,img,h3,dl,dd,dt,h1margin:0px;padding:0px;list-style:none; imgvertical-align: top; /*大圖切換*/ .scroll_viewmargin: 0px auto;overflow:hidden;position: relative; .photo_view lip

2、osition:absolute;width: 100%; .photo_view li em,.photo_view li h3position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px; .photo_view li emz-index: 1;background:rgba(0,0,0,0.5);filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr =

3、 #50000000,endColorstr = #50000000);_background:#000; .photo_view li h3z-index: 2;text-indent: 1em;font-weight: normal; .photo_view li h3 acolor:#fff; .photo_view li h3 a:hovercolor:#f60; .small_photoposition: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4; .small_photo li float: left;

4、padding-right: 10px; .small_photo li imgwidth: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px; .small_photo li.active imgborder: solid 2px #f60; html： !- start:大圖切換 - div class=scroll_view ul class=photo_view liimg src=images/ad1.jpg alt= class= /em/emh3a href=javascript:void(0);圖片效果1/a

5、/h3/li liimg src=images/ad2.jpg alt= class= /em/emh3a href=javascript:void(0);圖片效果2/a/h3/li liimg src=images/ad3.jpg alt= class= /em/emh3a href=javascript:void(0);圖片效果3/a/h3/li liimg src=images/ad4.jpg alt= class= /em/emh3a href=javascript:void(0);圖片效果4/a/h3/li /ul ul class=small_photo/ul /div !- En

6、d:大圖切換 - js： $.fn.extend( imgScroll:function(options) var def=phtot_parent:$(.scroll_view),photo_view:$(.photo_view),small_photo:$(.small_photo),speed:800,isauto:true,width:800,height:349, opt=$.extend(,def,options), $photo_view=opt.photo_view, $small_photo=opt.small_photo, speed=opt.speed, isauto=o

7、pt.isauto, index=0, _length=$photo_view.find(li).length, strTime=null; opt.phtot_parent.css(width:opt.width,height:opt.height); $photo_view.find(li:not(:first).hide()/.find(img).hide(); $photo_view.find(li).each(function(i) $small_photo.append(liimg src=+$(this).find(img).attr(src)+ alt= class= /li)

8、; ) $small_photo.find(li:first).addClass(active); /小圖鼠標(biāo)動(dòng)作 $small_photo.find(li).bind(mouseenter,function() clearInterval(strTime); if(index!=$(this).index() index=$(this).index(); animate(index) ).bind(mouseleave,function() if(isauto) start(); ); /大圖懸停動(dòng)作 $photo_view.find(li).bind(mouseenter,function

9、() clearInterval(strTime); ).bind(mouseleave,function() if(isauto) start(); ); /自動(dòng)播放 if(isauto) start(); /啟動(dòng)自動(dòng)播放 function start() strTime=setInterval(function() index = _length-1 ? index=0 : index+; animate(index); ,speed); /動(dòng)畫效果 function animate(_index)/console.log(_index) $small_photo.find(li).eq(

10、_index).addClass(active).siblings().removeClass(active);/轉(zhuǎn)變小圖導(dǎo)航樣式 $photo_view.find(li).eq(_index).css(z-index,1).siblings().css(z-index,0);/掌握absolute的層級(jí) $photo_view.find(li).eq(_index).show().find(img).css(opacity: 0); /裝大圖的opacity設(shè)置為0 $photo_view.find(li).eq(_index).find(img).animate(opacity:1,300,function() $(this).removeAttr(style);/動(dòng)畫之后刪除opacity $photo_view.find(li).eq(_index).show().siblings().hide();/顯示大圖 );/展現(xiàn)當(dāng)前顯示動(dòng)畫 ); script type=text/javascript $(function(