jQuery实现淡入淡出样式轮播
jQuery实现淡入淡出式轮播
HTML代码
1 <div class="viewport"> 2 <!-- 轮播图放置区域 --> 3 <div class="lb"> 4 <a href="" id="img1"><img src="image/lunbo/lunbo1.jpg"></a> 5 <a href="" id="img2"><img src="image/lunbo/lunbo2.jpg"></a> 6 <a href="" id="img3"><img src="image/lunbo/lunbo3.jpg"></a> 7 <a href="" id="img4"><img src="image/lunbo/lunbo4.jpg"></a> 8 <a href="" id="img5"><img src="image/lunbo/lunbo5.jpg"></a> 9 </div> 10 <!-- 轮播图右下小点点 --> 11 <div class="lb-control"> 12 <ul class="lb-page"> 13 <li class="page-item active" id="li1"></li> 14 <li class="page-item" id="li2"></li> 15 <li class="page-item" id="li3"></li> 16 <li class="page-item" id="li4"></li> 17 <li class="page-item" id="li5"></li> 18 </ul> 19 </div> 20 <!-- 轮播图左右两侧箭头 --> 21 <ul class="lb-pn"> 22 <li class="prev pn"></li> 23 <li class="next pn"></li> 24 </ul> 25 </div>
CSS代码
1 .viewport{ 2 position: relative; 3 height: 460px; 4 width: 100%; 5 } 6 .viewport .lb{ 7 position: absolute; 8 left: 0; 9 top: 0; 10 height: 460px; 11 overflow: hidden; 12 width: 100%; 13 } 14 .viewport a{ 15 opacity: 0; 16 z-index: 10; 17 position: absolute; 18 display: block; 19 } 20 #img1{ 21 opacity: 1; 22 } 23 .viewport img{ 24 width: 1229px; 25 height: 460px; 26 } 27 .lb-page{ 28 cursor: default; 29 display: block; 30 text-align: right; 31 position: absolute; 32 right: 30px; 33 bottom: 20px; 34 z-index: 999; 35 } 36 .lb-page .active{ 37 background: rgba(255,255,255,.3); 38 border-color: rgba(0,0,0,.4); 39 } 40 .lb-page li{ 41 display: inline-block; 42 width: 6px; 43 height: 6px; 44 margin: 0 5px; 45 cursor: pointer; 46 border-radius: 10px; 47 border: 2px solid #fff; 48 border-color: rgba(255,255,255,.3); 49 background: rgba(0,0,0,.4); 50 transition: all .2s; 51 } 52 .lb-page li:hover{ 53 background: rgba(255,255,255,.3); 54 border-color: rgba(0,0,0,.4); 55 } 56 .lb-pn .pn{ 57 display: block; 58 position: absolute; 59 cursor: pointer; 60 top: 50%; 61 z-index: 21; 62 margin-top: -35px; 63 height: 69px; 64 width: 41px; 65 } 66 .lb-pn .prev{ 67 left: 234px; 68 background: url('../image/lunbo/icon-slides.png') no-repeat -84px 50%; 69 } 70 .lb-pn .prev:hover{ 71 background-position: 0 50%; 72 } 73 .lb-pn .next{ 74 right: 0; 75 background: url('../image/lunbo/icon-slides.png') no-repeat -125px 50%; 76 } 77 .lb-pn .next:hover{ 78 background-position: -42px 50%; 79 }
JS代码 ( 切记不要忘记导入jQuery )
$(function () { var count = 0;//图片序号,初始为0 var imgList = $('.viewport a'); var lbLi = $('.lb-page li'); // 定义定时器 var timer = setInterval(play,3000); //切换图片函数 function change(fadeIn,fadeOut){ //fadeIn: 即将淡入的图片序号 //fadeOut: 即将淡出的图片序号 //0.5秒内上一张淡出 imgList.eq(fadeOut).animate({'opacity':'0'},500); //0.5秒内下一张淡入 imgList.eq(fadeIn).animate({'opacity':'1'},500); //改变轮播右下小点点样式,同时清除其余兄弟小点点样式 lbLi.eq(fadeIn).addClass('active').siblings().removeClass('active'); } //实现向右切换函数函数 function play(){ var outcount = count; //outcount是即将要淡出的图片序号,也就是现在这张图片的序号 count++; //count自加,count是将要淡入的图片序号,就是下一张图片序号 //如果当前图片是最后一张,再加一回到第一张图 count = count>=5?0:count; change(count,outcount); }; //点击左右翻页进行跳转 $(".lb-pn .prev").click(function(){ clearInterval(timer); var outcount = count; count-- //如果count是负数,跳转到最后一张图 count = count<0?4:count; change(count,outcount); timer = setInterval(play,3000); }); $('.lb-pn .next').click(function(){ clearInterval(timer); play(); timer = setInterval(play,3000); }); //点击小点点跳转到指定序号图片 lbLi.click(function(){ clearInterval(timer); var index = $(this).index(); change(index,count); count = index; //此处不加会产生bug: 下一张轮播图片不是从当前点击图片的下一张开始 timer = setInterval(play,3000); }); //悬浮清除定时器,移开继续 $('.viewport .lb').hover(function(){ clearInterval(timer); },function(){ timer = setInterval(play,3000); }); });
排坑之路
因为对js的不熟悉,导致在写这个轮播的时候遇到了很多问题,首先出现的问题就是一次性跳转两张图片.其实实际上还是每次一张,但是那两张图片的跳转间隔非常短暂,就造成了一次性两张的假象.经排查发现是鼠标悬浮事件设计错误,每次悬浮在轮播区域之后就会再开一个定时器,两个定时器同时进行,时间造成重叠,就造成了隔一张跳两张的假象.解决方法: 抽离逻辑,单独作为函数来使用.
第二次调试发现又出现了点击右下方的点点不能实现跳转的问题,问题根源: 图片跳转函数逻辑错误, 解决方法: 修改函数. 在点击小点点切换图片的逻辑中,切记要修改将要淡出的图片序号( count )为当前点击的小点点序号( $(this).index() ),不然会出现轮播不从当前点击的点点开始的bug.
