jQuery实现轮播图效果

<div class="slideshow"> ???<div class="btn"> ???????<span class="last-img">&lt;</span><span class="next-img">&gt;</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>

 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 ????????????//调用自动轮播的代码和点击上一张图片代码的setTimeout66 ????????????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>