首页 / 脚本样式 / JavaScript / 完美JQuery图片切换效果的简单实现

css：

body { font-family:"Microsoft Yahei"; }body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;}img{vertical-align: top;}/***大图切换***/.scroll_view{margin: 0px auto;overflow:hidden;position: relative;}.photo_view li{position:absolute;width: 100%;}.photo_view li em,.photo_view li h3{position: absolute;bottom: 0px;z-index: 1;height: 35px;line-height: 35px;width: 100%;left: 0px;}.photo_view li em{z-index: 1;background:rgba（0,0,0,0.5）;filter: progid:DXImageTransform.Microsoft.gradient（ GradientType = 0,startColorstr = "#50000000",endColorstr = "#50000000"）;_background:#000;}.photo_view li h3{z-index: 2;text-indent: 1em;font-weight: normal;}.photo_view li h3 a{color:#fff;}.photo_view li h3 a:hover{color:#f60;}.small_photo{position: absolute;bottom: 40px;right: 10px;cursor: pointer;z-index: 4;}.small_photo li {float: left;padding-right: 10px;}.small_photo li img{width: 80px;height: 35px;border: solid 2px #ccc;border-radius: 2px;}.small_photo li.active img{border: solid 2px #f60;}

html：

<！-- start:大图切换 --><div class="scroll_view"><ul class="photo_view"><li><img src="images/ad1.jpg" alt="" class="" /><em></em><h3><a href="javascript:void（0）;">图片效果1</a></h3></li><li><img src="images/ad2.jpg" alt="" class="" /><em></em><h3><a href="javascript:void（0）;">图片效果2</a></h3></li><li><img src="images/ad3.jpg" alt="" class="" /><em></em><h3><a href="javascript:void（0）;">图片效果3</a></h3></li><li><img src="images/ad4.jpg" alt="" class="" /><em></em><h3><a href="javascript:void（0）;">图片效果4</a></h3></li></ul><ul class="small_photo"></ul></div><！-- End:大图切换 -->

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=opt.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（"<li><img src=""+$（this）.find（"img"）.attr（"src"）+"" alt="" class="" /></li>"）;}）$small_photo.find（"li:first"）.addClass（"active"）;//小图鼠标动作$small_photo.find（"li"）.bind（"mouseenter",function（）{clearInterval（strTime）;if（index！=$（this）.index（））{index=$（this）.index（）;animate（index）}}）.bind（"mouseleave",function（）{if（isauto）{start（）;}}）;//大图悬停动作$photo_view.find（"li"）.bind（"mouseenter",function（）{clearInterval（strTime）;}）.bind（"mouseleave",function（）{if（isauto）{start（）;}}）;//自动播放if（isauto）{start（）;}//启动自动播放function start（）{strTime=setInterval（function（）{index >= _length-1 ? index=0 : index++;animate（index）;},speed）;}//动画效果function animate（_index）{//console.log（_index）$small_photo.find（"li"）.eq（_index）.addClass（"active"）.siblings（）.removeClass（"active"）;//改变小图导航样式$photo_view.find（"li"）.eq（_index）.css（"z-index",1）.siblings（）.css（"z-index",0）;//控制absolute的层级$photo_view.find（"li"）.eq（_index）.show（）.find（"img"）.css（{"opacity": 0}）;//装大图的opacity设置为0$photo_view.find（"li"）.eq（_index）.find（"img"）.animate（{opacity:1},300,function（）{$（this）.removeAttr（"style"）;//动画之后删除opacity$photo_view.find（"li"）.eq（_index）.show（）.siblings（）.hide（）;//显示大图}）;//展示当前显示动画}}}）;

<script type="text/javascript">$（function（）{$（"scroll_view"）.imgScroll（{photo_view:$（".photo_view"）,small_photo:$（".small_photo"）,speed:3000,isauto:true}）; }）</script>