jquery轮播图效果左右划动 解决定时器和点击冲突和li补小bug两种方法
很多网站首页都需要用到图片轮播效果，但是用原生js相对来说比较复杂，用jQuery实现效果比较迅速，写个demo分析讲解左右划动轮播图效果，这里有说到解决定时器和点击效果冲突和后面li补小bug两种方法
直接上代码里面有详解
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #tm{ width: 750px; height: 291px; border: 2px solid darkblue; margin: 100px auto; position: relative; overflow: hidden; } #tm .dk{ /*width: 3750px;*/ width: 4500px; height: 291px; border: 2px solid darkgreen; position: absolute; left: 0; top: 0; } #tm .dk img{ float: left; } #tm ul{ position: absolute; bottom: 0; right: 0; } #tm ul li{ list-style: none; float: left; width: 116px; height: 29px; line-height: 29px; text-align: center; color: white; font-size: 12px; font-family: "宋体"; background: black; opacity: 0.6; margin-left: 1px; } #tm ul li:hover{ /*没下划线*/ /*text-decoration: none;*/ /*有下划线*/ text-decoration: underline; color: #c00; } </style> <script src="../tu/jquery-1.11.3.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ // 先弄一个大总管变量 var t = 0; // 让定时器在自动跑的时候,点击是无效的 用一个变量去判断 var k = 2; //用来对应能否点击的状态 1代表不能点击，2代表能点击 (这个可以不写，我看了写这个东西后bug更多) // 自动轮播 控制自动轮播的函数 function hs(){ t++; //// ###########(*****)下面的(我删了，想看到02页面里看)可以这样写 最后的小bug,当li opacity变色的时候图片跑到第6个(最后的时候) li的颜色也回到第0个 if (t==5) { $('#tm ul li').eq(0).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'}); } if (t==6) { $('#tm .dk').css({'left':'0px'}); t=1; } // 计算大div应该到达的left值 // var y = -750*t; var y = t*-750; k=1; // 在函数过程中,在运动之前先变成1 在函数运动过程中 1代表不能点击 $('#tm .dk').animate({'left':y+'px'},300,function(){ k=2;//运动300毫秒完事后 再变成能点击2 }); // 让t号li透明度变0.8,兄弟li透明度变0.6 $('#tm ul li').eq(t).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'}); } var dsq = setInterval(hs,1000); var w; //在单击事件前 ，先声明一个变量，用来清除定时器 因为每次点击都会出来一个定时炸弹，快速点击很多次会出现定时炸弹叠加 // 给li加鼠标单击事件 $('#tm ul li').click(function(){ if (k==1) {//当k等于1时，不能点击 return; } clearInterval(w); // (解决定时器和点击效果冲突) 1、当我点击的时候(没有定时器)清理定时器 clearInterval(dsq); // 解决定时器和点击效果冲突 方法(二) 设一下定时炸弹来控制 （本来是300毫秒的，设置成400毫秒，为防止毫秒数有误差）400毫秒后恢复定时器 w=setTimeout(function(){ dsq = setInterval(hs,1000); },400) // 获得当前被点击li的序号 t=$(this).index(); // 计算大div应该到达的lfet值 var left = t*-750; $('#tm .dk').stop().animate({'left':left+'px'},300); // stop()消除叠加运动 // $('#tm .dk').stop().animate({'left':left+'px'},300,functon(){ //// 解决定时器和点击效果冲突 方法(一) 2、用回调函数来恢复定时器 可以在执行完前面运动的300毫秒后,再执行回调函数里的内容 // dsq = setInterval(hs,1000); // }); // 让当前被点击的li透明度变为0.8,兄弟li透明度变为0.6 $(this).css({'opacity':'0.8'}).siblings('li').css({'opacity':'0.6'}); }) }) </script> </head> <body> <div id="tm"> <div class="dk"> <img src="../tu/t01.jpg"/> <img src="../tu/t02.jpg"/> <img src="../tu/t03.jpg"/> <img src="../tu/t04.jpg"/> <img src="../tu/t05.jpg"/> <img src="../tu/t01.jpg"/> </div> <ul> <li style="opacity: 0.8;">狂欢一夏</li> <li>母婴品类日</li> <li>浪的冒泡</li> <li>生鲜洒水</li> <li>买2免1</li> </ul> </div> </body> </html> 代码效果图片：
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知