jquery实现淡入淡出轮播图效果

时间：2021-05-26

本文实例为大家分享了jquery实现淡入淡出轮播图的具体代码，供大家参考，具体内容如下

如题所述，直接上代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { padding: 0px; margin: 0px; } .box { position: relative; } .box, .banner { width: 1000px; height: 500px; margin: 50px auto; } .box .banner { position: relative; list-style: none; } .banner li { display: none; } .box ul li img { position: absolute; } .banner .b1 { display: block; } span { background: rgb(0, 0, 0, 0.5); width: 40px; height: 50px; display: block; position: absolute; left: 0px; top: 50%; z-index: 3; line-height: 50px; text-align: center; cursor: pointer; font-family: "宋体"; font-size: 20px; color: white; } .right { left: auto; right: 0px; } .bottom { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); list-style: none; } .bottom li { width: 10px; height: 10px; background: rgb(255, 255, 255); float: left; border-radius: 50%; margin: 0px 5px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); cursor: pointer; } .bottom .on { background: rgb(255, 153, 0); }</style><script src="https://libs.baidu.com/jquery/2.0.0/jquery.js"></script><body> <div class="box"> <!-- 轮播图 --> <ul class="banner"> <li class="b1"> <img src="../img/timg.jpg" alt=""> </li> <li> <img src="../img/timg1.jpg" alt=""> </li> <li> <img src="../img/timg2.jpg" alt=""> </li> <li> <img src="../img/timg3.jpg" alt=""> </li> <li> <img src="../img/timg4.jpg" alt=""> </li> </ul> <!-- 左右切换 --> <span class="left"> < </span> <span class="right">&gt; </span> <!-- 底部按钮 --> <ol class="bottom"> <li class="on"></li> <li></li> <li></li> <li></li> <li></li> </ol> </div></body><script> var $box = $(".box"); var $bli = $(".box ul li"); var $bleft = $(".box .left"); var $bright = $(".box .right"); var $dot = $(".box .bottom li"); var timer = null; var num = 0; // 因为几行代码一样 所以进行代码封装 function play() { num = num % $bli.length; $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800); $dot.eq(num).addClass("on").siblings().removeClass("on"); } function autoplay() { timer = setInterval(function () { num++; play(); }, 2000); }; autoplay(); // 当鼠标放上去的时候 计时器停止 移除的时候计时器工作 // $box.hover(function() { // clearInterval(timer); // },function() { // autoplay(); // }); // 下面是同样的效果 另一种写法 $box.mouseover(function () { clearInterval(timer); }); $box.mouseout(function () { autoplay(); }); $bleft.click(function () { num--; play(); }); $bright.click(function () { num++; play(); }); $dot.click(function (event) { var index = $(this).index(); num = index; $bli.eq(num).stop().fadeIn(800).siblings().fadeOut(800); $dot.eq(num).addClass("on").siblings().removeClass(); });</script></html>

其实淡入淡出轮播图的核心思想就是获取到当前的索引，根据索引找出图片的索引然后更改索引达到一个图片显示 其他图片消失 然后轮流交替进行的。最主要的核心思想在上面sibinling（）中 通过这个方法让当前元素进行淡入操作但是让其他元素进行淡出操作，所以效果上就形成了，一张张图盘轮流出来的效果。

更多关于轮播的精彩文章，请点击《jquery图片轮播》进行学习

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章