轮播图的开发jquery写法
1、获得移入的li的序号($(this).index();)存到c这个变量里去如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } #fk{ width: 1200px; height: 535px; border: 2px solid blueviolet; margin: 50px auto; position: relative; } #fk img{ position: absolute; top: 0; left: 0; display: none; } #fk ul{ position: absolute; bottom: 23px; left: 548px; } #fk ul li{ list-style: none; width: 12px; height: 12px; background: #DDDDDD; float: left; margin-right: 8px; border-radius: 50%; } </style> <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> <script type="text/javascript"> $(function(){ // 设一下大总管变量 var c=0; function hs(){ c++; // c=(c==5)?0:c; 三元表达式判断 if (c==5) { c=0; } // 让c号图片显示,兄弟图片隐藏 // 让c号图片显示 show:显示 eq(c):找#fk里面的序号是第c个img标签 // $('#fk img').eq(c).show(); // //// 找到它的元素兄弟隐藏 siblings:找兄弟 兄弟元素都会被选中，除自已以外没选到 hide:隐藏 // $('#fk img').eq(c).siblings('img').hide(); // 链式操作,精简写法 show（硬显示） hide:隐藏 // $('#fk img').eq(c).show().siblings('img').hide(); // 淡入淡出 fadeIn:渐显 在隐藏时点击慢慢显示出来 fadeOut:渐隐 $('#fk img').eq(c).fadeIn(300).siblings('img').fadeOut(300); // 让c号li变红 $('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'}); } var dsq = setInterval(hs,1000); // 移入事件: mouseover ==> mouseenter // 移出事件: mouseout ==> mouseleave // 给li加鼠标移入事件 $('#fk ul li').mouseenter(function(){ var xh = $(this); // 把移进来的函数放在定时炸弹里,让它缓一下(200毫秒)再执行 // 停止定时器 clearInterval(dsq); tt = setTimeout(function(){ // 获得移入的li的序号($(this).index();) 存到c这个变量里去 // 如果$(this)写在定时器里,那$(this)指向的就是定时器,所以不能写在这里,先存在上一步一个变量里 // c=$(this).index(); c=xh.index(); // jQuery图片动画显示时间会磊加,如果你300毫秒钟移动5次li,那么fadeIn(300)*5, 1500毫秒才能走完图片(延时) 用stop()解决这个问题; // 让eq(c)元素点进来后停止(stop())还没运动完成的图片,再执行下个动画300毫秒fadeIn(300) $('#fk img').eq(c).stop().fadeIn(300).siblings('img').stop().fadeOut(300); $('#fk ul li').eq(c).css({'background':'#A10000'}).siblings('li').css({'background':'#DDDDDD'}); },200) }) // 鼠标移出事件 $('#fk ul li').mouseleave(function(){ // 清理定时炸弹200毫秒的那个 clearInterval(tt); // 恢复定时器 dsq = setInterval(hs,1000); }) }) </script> </head> <body> <div id="fk"> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188163753008.jpg" alt="" style="display: block;"/> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188163335544.jpg" alt="" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188164175308.jpg" alt="" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188164956825.jpg" alt="" /> <img src="https://www.qiquanji.com/mip/data/img/dmj/201903101552188164532873.jpg" alt="" /> <ul> <li style="background: #A10000;"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </body> </html> 代码效果点上面的（运行代码）来看
本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。
微信扫码关注
更新实时通知