任务实现：用jQuery实现轮播图。
来自瓶子啊之小白，欢迎来访，欢迎指导。
相信大家从事前端的开发者初级就是轮播图，首先我用jquery写了一个，第二篇我会用原生JavaScript给大家展示。其原理是一样的，只不过jquery封住好了一些属性和方法。获取节点和实现效果就比较方便快捷了。
下面是展示代码和介绍：
html部分代码：
<div class="slideshow"> <div class="btn"> <span class="last-img"><</span><span class="next-img">></span> </div> <div class="ra-show"> <i class="active">1</i> <i>2</i> <i>3</i> <i>4</i> <i>5</i> </div> <ul> <li style="display: block;"> <a href="#"><img src="img/wangou1.jpg" /></a> </li> <li> <a href="#"><img src="img/wangou2.jpg" /></a> </li> <li> <a href="#"><img src="img/wangou3.jpg" /></a> </li> <li> <a href="#"><img src="img/wangou4.jpg" /></a> </li> <li> <a href="#"><img src="img/wangou5.jpg" /></a> </li> </ul> </div>
css部分代码：
* { padding: 0; margin: 0; } .slideshow { height: 300px; width: 500px; margin: 0 auto; margin-top: 100px; overflow: hidden; position: relative; } .slideshow .btn { height: 50px; width: 100%; position: absolute; top: 45%; z-index: 2; } .slideshow .ra-show { height: 20px; width: ; position: absolute; bottom: 20px; left: 45%; z-index: 2; } .ra-show i { width: 18px; height: 18px; display: inline-block; border-radius: 50px; background: #efefef; font-size: 12px; line-height: 18px; text-align: center; cursor: pointer; } .slideshow .ra-show .active { background: #ff9000; box-shadow: 0 0 10px #FF9000; } .btn span { height: 50px; width: 50px; background-color: rgba(0, 0, 0, 0.2); line-height: 50px; text-align: center; border-radius: 50%; cursor: pointer; font-size: 20px; color: #ffffff; } .btn span:hover { background-color: rgba(0, 0, 0, 0.5); } .btn .last-img { float: left; } .btn .next-img { float: right; } .slideshow ul { position: relative; } .slideshow ul li { height: 300px; width: 500px; list-style: none; position: absolute; display: none; } .slideshow ul li:hover { cursor: pointer; } .slideshow ul li img { height: 300px; width: 500px; }
js部分代码：
1 //引入jQuery文件 2 <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script> 3 <script type="text/javascript"> 4 //声明一个变量，下面的时候通过算术方法改变变量的值 5 var current = 0; 6 //初始化数据 7 var timer = null; 8 var pre = null; 9 var nex = null; 10 $(document).ready(function() { 11 var li_v = $('.slideshow ul li'); 12 var i_v = $('.ra-show i'); 13 //设置自动播放 14 function mover() { 15 //首先清除当前current以外的li_v的样式显示和伪圆标i_v的效果, 以下的同上 16 li_v.hide(); 17 // i_v.eq(current).removeClass("active"); 18 i_v.removeClass("active"); 19 current = (current + 1) % (li_v.length); 20 console.log(current); 21 //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现了移出鼠标的时候跳转到下一个图片轮播 22 i_v.mouseover(function() { 23 current = $(this).index(); 24 // console.log($(this).index()); 25 }); 26 //当鼠标放在伪圆标时候获取当前的索引值，并把它赋给current从而实现下一个图片轮播 27 li_v.eq(current).fadeIn(1000); 28 i_v.eq(current).addClass("active"); 29 }; 30 //设置自动轮播 31 timer = setInterval(mover, 2000); 32 //鼠标划入的时候停止轮播 33 li_v.mouseover(function() { 34 clearInterval(timer); 35 }); 36 //鼠标移出的时候继续轮播 37 li_v.mouseout(function() { 38 timer = setInterval(mover, 2000); 39 }); 40 //实现左右按钮事件 41 //点击左按钮事件 42 $(".last-img").click(function() { 43 // 首先清除定时器 44 clearInterval(timer); 45 clearInterval(pre); 46 //实现点击按钮显示上一个图片代码 47 function last_v() { 48 li_v.hide(); 49 i_v.removeClass("active"); 50 current = (current - 1 + li_v.length) % (li_v.length); 51 //console.log(current); 52 li_v.eq(current).fadeIn(1000); 53 i_v.eq(current).addClass("active"); 54 }; 55 pre = setTimeout(last_v, 10); 56 timer = setInterval(mover, 2000); 57 }); 58 //点击右按钮事件 59 //只需继续轮播就可以 60 $(".next-img").click(function() { 61 // 首先清除定时器 62 clearInterval(timer); 63 clearInterval(nex); 64 //console.log(current); 65 //调用自动轮播的代码和点击上一张图片代码的setTimeout 66 nex = setTimeout(mover, 10); 67 timer = setInterval(mover, 2000); 68 }); 69 //添加伪类下标圆标动事件 70 //鼠标碰到伪圆标的时候显示所对应的图片并且停止页面。 71 i_v.mouseover(function() { 72 clearInterval(timer); 73 i_v.removeClass("active"); 74 li_v.hide(); 75 li_v.eq($(this).index()).fadeIn(1000); 76 $(this).addClass("active"); 77 //console.log($(this).index()); 78 }); 79 }); 80 </script>
完成实现，欢迎来访！！！