使用js实现轮播图效果

目录

一、搭建基本结构

二、功能

Ⅰ.鼠标经过轮播图，显示隐藏的左右箭头

Ⅱ.点击箭头，图片滚动，

点击右箭头

点击左箭头

Ⅲ.点击箭头，图片滚动同时，指示器跟着变化

  点击右箭头

  点击左箭头

Ⅳ.点击指示器，指定图片滚动

Ⅴ.鼠标不经过轮播图，轮播图会自动播放

三、两个bug解决方案

四、源码获取

---

步骤

一、搭建基本结构

1.设置一个大盒子，放左右箭头，指示器，图片

2.用ul li a img 结构放置图片

3.给li 设置浮动 ，给ul设置宽度保证可以装下所有图片，即为图片个数*100%

二、功能

Ⅰ.鼠标经过轮播图，显示隐藏的左右箭头

        动态生成指示器

                   核心：指示器个数要和没有克隆时，图片的张数一致

                    ①得到ul里面图片的个数

                   ②利用循环动态生成指示器

                               创建节点createElement(‘节点’)

                               插入节点ol.appendChild(节点)

       指示器排他思想

                    点击当前指示器，添加active类

                    其余指示器就移除这个active类

---

Ⅱ.点击箭头，图片滚动，

注意：num要声明成全局变量，因为左右箭头都使用

点击右箭头

    声明一个变量num,点击一次，就自增1，让这个变量乘以图片的宽度，就是ul的滚动距离

无缝滚动原理

  ①把ul第一个li复制一份，放到ul最后面

        克隆第一张图片

                  克隆ul第一个li  cloneNode()加true深克隆，复制里面的节点，false浅克隆

          添加到ul最后面appendChild

 ②当图片滚动到克隆的最后一张图片的时候，让ul快速的，不做动画的跳到最左侧：left为0，同时num赋值为0，可以重新开始滚动图片

点击左箭头

      声明一个变量num,点击一次，就自减1，让这个变量乘以图片的宽度，就是ul的滚动距离

无缝滚动原理

      当图片滚动到第一张图片的时候，让ul快速的，不做动画的跳到最右侧：left为-(图片个数-1)*图片宽度，同时num赋值为图片个数-1，可以重新开始滚动图片

---

Ⅲ.点击箭头，图片滚动同时，指示器跟着变化

  注意：circle要声明全局变量,因为左右箭头都使用

  点击右箭头

       ①声明一个变量circle，每次点击自增1

       ②但是因为图片比指示器多一个，必须加判断条件，当滚动到克隆图片时候，此时circle值是指示器的个数  设置circle=0；重新开始滚动指示器

  点击左箭头

      ①声明一个变量circle，每次点击自减1

     ②但是因为图片比指示器多一个，必须加判断条件，当滚动到第一个图片的时候，此时circle值是0，当再次点击左按钮，此时circle=-1,  需要设置circle=指示器的长度-1；重新开始滚动指示器

Ⅳ.点击指示器，指定图片滚动

1.引入animation.js

2.元素必须定位

3.注意是ul移动

4.滚动图片的核心算法：点击某个指示器，就让图片滚动，指示器的索引号乘以图片的宽度作为ul移动距离

5.此时需要知道指示器的索引号，我们可以在生成指示器的时候，给他一个自定义属性，点击的时候获取这个自定义属性即可

Ⅴ.鼠标不经过轮播图，轮播图会自动播放

1.添加一个定时器

2.自动播放轮播图，类似于点击右侧按钮

    此时我们使用手动调用右侧按钮点击事件next.click()

    鼠标经过轮播图，就停止定时器

    鼠标离开轮播图，就开启定时器

---

三、两个bug解决方案

当点击某个指示器，将当前的索引号赋值给num

当点击某个指示器，将当前的索引号赋值给circle

---

四、源码获取

仓库地址

    点击可跳转到仓库