效果如下：

css:

正文{ font-family: '微软雅黑；}body、ul、li、img、h3、dl、dd、dt、h1 { margin :0 pxpadding :0 pxlist-style : none；} img {垂直对齐：顶部；}/***大图切换***/.scroll _ view { margin : 0px auto；飞越：隐藏；相对位置：}.photo _ view李{位置：绝对；宽度： 100%;}.照片查看李昂.photo _ view李{位置：绝对；bottom : 0pxz-index : 1；高度： 35px线高： 35px宽度： 100%;left: 0px}。photo _ view Li em { z-index : 1；background:rgba(0，0，0，0.5)；过滤器： progid : maximagettransform .微软。渐变(渐变类型=0，startColorstr='#50000000 '，endColorstr=' # 50000000 ')；_ background: # 000}。photo _ view李{ z-index : 2；文本缩进： 1em字体粗细：正常；}.photo _ view李a { color : # fff}.photo _ view李a :悬停{ color : # f60}.小_照片{position:绝对值；bottom : 40pxright : 10pxcursor :指针；z-index : 4；}.小_照片li {float:左侧；填充-右： 10px}.small _ photo Li img { width : 80px；高度： 35pxborder:固体2px # cccborder-半径： 2px}.小_照片李。活动img {边框：实心2px # f60}html:

！-开始：大图切换-div class=' scroll _ view ' ul class=' photo _ view ' liimg src=' http : images/ad1。jpg ' alt=' class=' ' '/em/emh3a href=' JavaScript 3: void(0)；'图片效果1/a/Li Li img src=' http : images/ad2。jpg ' alt=' class=' ' '/em/emh3a href=' JavaScript 3: void(0)；'图片效果2/a/Li Li img src=' http : images/ad3。jpg ' alt=' class=' ' '/em/emh3a href=' JavaScript 3: void(0)；'图片效果3/a/Li Li img src=' http : images/ad4。jpg ' alt=' class=' ' '/em/emh3a href=' JavaScript 3: void(0)；'图片效果4/a/Li/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 ')，速度：800，isauto:true，宽度：800，高度：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 ').长度，strTime=nullopt。phtot _ parent。CSS({ width : opt。宽度、高度： opt。高度})；$ photo _ view。find(' li:不是(:优先)').hide()//.查找(' img ').hide()；$photo_view.find('li ').每个（函数(一){ $ small _ photo。追加(' liimg src=' http : ' $)(this).查找(' img ').attr(' src ')' ' alt=' class=' ' '//Li ')；})$ small _ photo。查找('李：第一').添加CLaSS(' active ')；//小图鼠标动作$small_photo.find('li ').bind('mouseenter '，function(){ clearInterval(StRTime)；if(index！=$(这个)。index()){ index=$(this).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()；} //启动自动播放函数start(){ StRTime=set interval(function(){ index=_ length-1？指数=0 :指数；动画（索引);},速度);} //动画效果函数动画(_ index){//控制台。log(_ index)$ small _ photo。查找('李').eq(_index).addClass('active ').兄弟姐妹()。移除CLaSS(' active ')；//改变小图导航样式$photo_view.find('li ').eq(_index).css('z-index '，1).兄弟姐妹()。css('z-index '，0)；//控制绝对的的层级$photo_view.find('li ').eq(_index).显示()。查找(' img ').css({ "不透明度": 0 });//装大图的不透明设置为0 $photo_view.find('li ').eq(_index).查找(' img ').animate({ opa city 33601 }，300，function(){ $(this).移除attr(' style ')；//动画之后删除不透明度$photo_view.find('li ').eq(_index).显示()。兄弟姐妹()。hide()；//显示大图});//展示当前显示动画} }});脚本类型=' text/JavaScript ' $(function(){ $(' scroll _ view ')).imgScroll({photo_view:$(').photo_view ')、small_photo:$(' .small _ photo’)，speed:3000，isauto : true })；})/脚本以上这篇完美JQuery图片切换效果的简单实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。