小白怎么做一个轮播图?（思路+代码）

1. 在页面中写好结构和样式（根据情况而定）

2. 外层用一个$(function(){})函数包裹起来，代表等页面的内容加载完成后再去执行jquery的功能代码。

3. 获取到包裹ul，li的大盒子元素：const $div = $('#div');和包裹图片的ul元素：$ul = $div.children('ul');再获取到包裹图片的每个li元素：$imgs = $ul.children();再获取到li的所有长度，因为后面我们要clone第一张到最后一张，所以不用具体的数字，为：const len = $imgs.length;此外还需再获取到一个li的宽度，为：const width = $imgs.eq(0).outerwidth()

4. 需要声明两个变量记录下一张和上一张的状态，var index = 0
var lastindex = 0

5. 此外，为了防止后面用户点得太快，轮播图出现bug，需要声明一个变量来记录轮播图的运动状态
   var ismove = false（运动状态默认为false）、

6. 开始做之前，我们需要知道一件事，就是当我们点到第五张的时候，如果直接跳回第一张，肯定会给到用户不好的体验，所以，此时，我们应该把第一张clone，放到最后一张后面，让两张相同的图片来进行跳转，这样其实我们是使用了一个障眼法来迷惑了用户。
   $imgs.eq(0).clone().appendTo($ul)

7. 把第一张克隆放到最后一张后，我们就紧接着去计算所有的li的长度。因为这时的长度，才是真正我们想要的长度。
   $ul.width((len+1)*width)

8. 其实这两句完全可以写为一句。
   $ul.append($imgs.eq(0).clone()).width((len+1)*width)

9. 以上的准备工作做好了之后，我们要开始创建下面的小按钮

  for(var i = 0; i <len; i++){
  $('<li>').html(i+1).addclass(i === 0 ? 'ac' : '').appendTo('#div ol')
  }

因为在css中写好了样式，创建好了之后会到之前写好的位置当中，i+1的意思是按钮的内容，会按1，2，3，4，5…排列好，这也会让第一个小按钮默认为第一个，并具备ac这个样式。

11. 把li创建好，并插入到（''#div ol'）中后，这时我们要获取这元素
    const $btns = $('#div ol li')

12. 获取完成之后，要给他添加一个点击事件，让他能够点击切换

   $btns.on('click',function(){
   
   })

13. 添加好之后我们要开始在里面写内容了,还记得上面的ismove =false吗，其实每个事件都要加上这个代码，不过要进行判断，如果在动的时候，就停止下面的代码运行，停止的时候，就为true，让代码动起来。

$btns.on('click',function(){
if（ismove）return；
ismove = true；
})

14. 做好上一步之后，我们还要用之前声明的index = 0，lastindex =0，来存储我们点击的时候的上一个和下一个的索引，这样就不用把五个事件都加进来清空了，

$btns.on('click,function(){
if(ismove) return;
ismove =true;
//可以把这一步理解为，把现任变成前任，
//再给现任赋值他当前的索引
lastindex = index;
index = $(this).index()
}')
//接下来，我们要移出掉前任的“记忆”，把美好的“记忆”给现任
$btns.on('click',function(){
if(ismove) return
ismove = true
lastindex = index
index = $(this).index()
$btns.eq(lastindex).removeclass('ac')
$btns.eq(index).addclass('ac')
})

15. 接下来，我们既然已经控制好了点击的状态，不会让他“暴躁”，也获取了下一个和上一个li的索引，并给当前的li添加了’ac‘和上一个li移出’ac‘，那么接下来，就是让它动起来了！！！其实只需给它添加一个自定义动画函数即可~~~

   $btns.on('click',function(){
   if(ismove) return
   ismove = true
   lastindex = index
   index = $(this).index()
   $btns.eq(lastindex).removeclass('ac')
   $btns.eq(index).addclass('ac')
   $ul.animate({
   //这句代码表示，移动的距离是当前的索引值*width
   //因为是向左移动，所以，用-index，肯定有人问，为什么不在left前加符号，因为left是一个属性值
   left: -index * width
   }，1000，function（）{
   ismove = false
   //这个是回调函数，是运动结束之后要去执行的代码，ismove = false，让本次运动结束，如果运动结束之后没什么事干，就可以不用写回调函数
   })
   })

到此，我们下面的小图标的运动轮播图的切换就算完成了！！！

16. 接下来，我们要写的是向右点击的大箭头切换。
    其实上面也说了一些思路，这里我直接写一点

   $('#goNext').on('click',function(){
   if(ismove)  return
   ismove = true
   lastindex = index
   index++
   })

上面的开头，看起来其实很熟悉，对吧，接下来，其实我们要做的就是点击的时候，当点到了最后一张，不是出现空白，而是让他跳转到第一张，并且下面的小按钮也跟着改变。

$('#goNext').on('click',function(){

if (ismove) return

ismove = true

lastindex = index

index++

if(index === len){

index = 0

//本次动画的意义在于，当移动到最后一张时，下标为len，让ul瞬间回到0的位置

$ul.stop().animate({

left = -len*width

},1000,function(){

//用css（'left',0）可以让它回到初始位置

$ul.css('left',0)

ismove = false

})

}else{

$ul.stop().animate({

left = -index*width;

},1000,function(){

ismove = false

})

}

$btns.eq(lastindex).removeclass('ac')

$btns.eq(index).addclass('ac')

})

17. 接下来，我们需要做的是向左点击切换的大箭头
    其实向右点击，我们需要做的是，当点击到第一张之前时，要让它跳到最后一张：len - 1，

   $('#goPrev').on('click',function(){
   if(ismove = false)
   ismove  = true
   lastindex = index
   index--
   //当index小于0，即超出边界时，让index = len - 1
   if(index < 0){
   index = len - 1
   $ul.css('left',-len * width).animate({
   left = -index * width
   },1000,function(){
   ismove = false
   })
   }else{
   $ul.animate({
   left = -index*width
   },1000,function(){
   ismove = false
   })
   }
   $btns.eq(lastindex).removeclass('ac')
   $btns.eq(index).addclass('ac')
   })

18. 其实除了以上的东西，我们还要做的一个东西是，当鼠标移入时，这个轮播图停止，离开时继续自动播放。

   div1.hover(() => {
       clearInterval($div1.timer)
     }, (function auto () {
       $div1.timer = setInterval(() => {
         $('#goNext').trigger('click')
       }, 3000)
       return auto
     })())
   })
   

到这里，我们的轮播图就算是完成了！！！