javascript 原生js 轮播图详解

目录

1. 轮播图功能的实现

4.1 获取元素

1.2 左右按钮显示隐藏

1.3 小圆圈动态设置 点击添加类名 点击图片移动

1.4 克隆小li放到ul 最后

1.5 点击右侧按钮 图片能够滚动

1.6 点击右侧按钮，小圆点同步变化

1.7.1 左侧按钮 图片能够滚动

1.7.2 小bug num = index； circle = index（添加两行代码即可）

1.8自动播放轮播图

1.9 节流阀的设置 按钮不能拼命点(添加几行代码即可）

---

1. 轮播图功能的实现

1.1 获取元素

html结构

        
        

          

            
          
          

            
          
          

            
          
          

            
          
        
        
        

          
        
        
        

          
          
            <
          
          
            >
          
        

        
      

左右按钮样式的html结构和css设置：

.banner_btn {
   display: none;
 }
 .btn_le,
 .btn_ri {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 30px;
   height: 50px;
   background-color: rgba(0,0,0,.3);
   color: #fff;
   font-size: 25px;
   text-align: center;
   line-height: 46px;
 }
 .btn_le {
   left: 0;
   border-top-right-radius: 100px;
   border-bottom-right-radius: 100px;
 }
 .btn_ri {
   right: 205px;
   border-top-left-radius: 100px;
   border-bottom-left-radius: 100px;
 }

问题：箭头无法居中

1.2 左右按钮显示隐藏

鼠标经过 显示左右按钮 鼠标离开 按钮隐藏

// 1. 获取元素
var banner_img = document.querySelector('.banner_img');
var banner_btn = banner_img.querySelector('.banner_btn');
var publish_slider = banner_img.querySelector('.publish-slider');

// 2. 鼠标经过 按钮显示 离开 隐藏
publish_slider.addEventListener('mouseenter', function () {
    banner_btn.style.display = 'block';
})
publish_slider.addEventListener('mouseleave', function () {
    banner_btn.style.display = 'none';
})

其余的css部分可以自己去调式

1.3 小圆圈动态设置 点击添加类名 点击图片移动

1. 写法一：遍历小a然后再for循环，利用classList添加类名

   2.1 a.setAttribute('index', i); a一生成就添加索引，index记得加引号

   2.2 a.href = 'javascript:;'; 记得添加属性 不然无法点击

   2.3 var index = this.getAttribute('index');** num = index;** 点击小圆点的时候才获取索引号--这个为后面的点击按钮 能够移动做准备

   var b_dot = document.querySelector('.b_dot');
   // ul里面有几个小li 就生成几个小a
   console.log(publish_slider.children.length); // 4
   for (var i = 0; i < publish_slider.children.length; i++) {
           var a = document.createElement('a');
           a.setAttribute('index', i);
           // 设置属性
           a.href = 'javascript:;';
           // 把a放入盒子
           b_dot.appendChild(a); 
           var x = banner_img.offsetWidth + 18; // +18是因为位移有点偏移
           // 点击小圆点事件
           a.addEventListener('click', function () {
               // 4. 排他思想 干掉所有人 留下我自己
               b_dot.querySelector('.on').classList.remove('on');
               this.classList.add('on');
               // 点击小圆点就获取索引号
               var index = this.getAttribute('index');
               num = index;
               console.log(num);
               // 调用animate函数
               animate(publish_slider, -num * x);
           })
       }

   2.4 几个易错点：

   1. b_dot.querySelector('.on')这个写法，容易里面的on没有添加点

   2. remove('on');或者是add('on');这个里面容易添加点，但是不应该

   3. var as = b_dot.querySelectorAll('a');获取a元素，前面All没有添加，导致出错

   4. 注意绑定事件，输出测试一下，获取元素也输出测试一下

   2 .5 页面刷新 有一个小圆点有类名

        // 通过父亲选到a的集合
        var as = b_dot.querySelectorAll('a');
        // 第一个元素的类名先设置为on,刷新有的显示
        as[0].className = 'on';

   写法二：事件委托·e.target：能够获取当前点击的对象

   b_dot.addEventListener('click', function (e) {
       // console.log(e.target); 
       b_dot.querySelector('.on').classList.remove('on');
       e.target.classList.add('on');
   })

1.4 克隆小li放到ul 最后

     var first = publish_slider.children[0].cloneNode(true);
     publish_slider.appendChild(first);

1. 克隆用： cloneNode(true)

2. 插入到元素的末尾用： appendChild

3. 把父盒子的孩子的第一个克隆： publish_slider.children[0]

1.5 点击右侧按钮 图片能够滚动

无缝滚动的原理：

1. 克隆第一个图片放到最后面

2. 当点击按钮移动到最后一个图片时，这个图片是克隆的，此时快速的让ul跳到第一张位置，并且num变成0，因为没有调用动画函数，所以这个步骤观众看不到

3. 同时再紧接着让num++变成1，然后再调用动画函数，能够滚动到第二张图片

4. 整体形成了，我只点击了一次按钮，但是执行了(让if语句判断，ul移动到最左侧，num变成0)，再次num++，调用animate函数。实现了从最后一张图跳到第一张在移动到第二张图片的无缝衔接

btn_ri.addEventListener('click', function () {
        // 7. 点击右侧按钮 图片能够移动
        if (num == publish_slider.children.length - 1) {
            // animate(publish_slider, -num * x); 执行这个就是会有缓动效果
            // 下面可不能加transition 不然就露馅了，上面也不能用animate 
            // 要悄无声息跳过去
            publish_slider.style.left = 0;
            num = 0;
        }
        // 这里可不能加else分支，不然无缝滚动就无法进行了
        num++;
        animate(publish_slider, -num * x);
        console.log(num);

    })

1.6 点击右侧按钮，小圆点同步变化

        btn_ri.addEventListener('click', function () {
        // 7. 点击右侧按钮 图片能够移动
        if (num == publish_slider.children.length - 1) {
            // animate(publish_slider, -num * x); 执行这个就是会有缓动效果
            publish_slider.style.left = 0;
            num = 0;
        }
        num++;
        animate(publish_slider, -num * x);
        // console.log(num);
		
        
       、//点击按钮 小圆点也切换 仅仅用了下面的代码
        circle++;
        if (circle == b_dot.children.length) {
            circle = 0;
        }
        circleChange();
    })

易错点：

1. circle++写在if语句的上面还是下面，你试一下便知道了。写在下面的话，circle是可以取到4的

2. b.dot.children的长度 不是 b_dot的长度

3. 这里弄完了以后，再调用函数

4. 在这个时候，不需要建立和index或者num 的联系

1.7.1 左侧按钮 图片能够滚动

        btn_le.addEventListener('click', function () {
        // 7. 点击右侧按钮 图片能够移动
        if (num == 0) {
            num = publish_slider.children.length - 1;
            // 没加px 这里就是错的
            publish_slider.style.left = - num * x + 'px';
        }
        num--;
        animate(publish_slider, -num * x);
        // console.log(num);

        // circle = num; 这句话是不对的
        circle--;
        if (circle < 0) {
            circle = b_dot.children.length - 1;
        }
         // 下面的三元更加省代码
         // circle = circle < 0 ? b_dot.children.length - 1 : circle;
        circleChange();
    })

点击左侧按钮的注意无缝的操作：

1. 和右侧按钮类似，当处于第一张图片时，再点击按钮，要切换克隆的那张图片，索引是publish_slider.children.length，同时num--后要再次移动，这样能够切换到克隆前的那张图片

2. 切记一个地方没加px就是错的。publish_slider.style.left = - num * x + 'px';

3. 小圆点的变化，circle也是--；如果小于0，就让他等于孩子的长度减-1

4. 最后调用函数进行排它思想

1.7.2 小bug num = index； circle = index（添加两行代码即可）

            a.addEventListener('click', function () {
            // 4. 排他思想 干掉所有人 留下我自己

            // 点击小圆点就获取索引号
            var index = this.getAttribute('index');
            num = index; // 这个不设置 点击按钮无法移动
            circle = index; // 这个不设置 小圆点排他思想无法成功
            // console.log(num);
            circleChange();
            // 调用animate函数
            animate(publish_slider, -num * x);
        })

问题1： 点击小圆点 图片不会切换了；num = index

问题2: 点击小圆点 类名也不会切换了；circle = index

1.8 自动播放轮播图

开启定时器

 var timer = setInterval(function () {
         btn_ri.click();
     }, 2000);

鼠标经过大区域关闭定时器，鼠标离开，打开定时器;添加几行代码即可

 banner_img.addEventListener('mouseenter', function () {
         banner_btn.style.display = 'block';
         clearInterval(timer);
     })
     banner_img.addEventListener('mouseleave', function () {
         banner_btn.style.display = 'none';
         timer = setInterval(function () {
             btn_ri.click();
         }, 2000);
     })

1.9 节流阀的设置 按钮不能拼命点(添加几行代码即可）

思路：

1. 先声明flag变量=true

2. 点击事件一开始，只有flag=true才能执行，进去if里面，第一就是flag=false

3. 等到里面的animate函数结束完，动画执行完，执行回调函数的时候，才把flag改为true

var flag = true;
     btn_ri.addEventListener('click', function () {
         if (flag) {
             flag = false;
             // 7. 点击右侧按钮 图片能够移动
             if (num == publish_slider.children.length - 1) {
                 // animate(publish_slider, -num * x); 执行这个就是会有缓动效果
                 publish_slider.style.left = 0;
                 num = 0;
             }
             num++;
             animate(publish_slider, -num * x, function () {
                 flag = true;
             });
             // console.log(num);
 ​
             // circle = num; 这句话是不对的
             circle++;
             if (circle == b_dot.children.length) {
                 circle = 0;
             }
             circleChange();
         }
     })

结尾：

学习id： 201903090124-

现在是大三学生，学习到了前后端交互的git阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。