JS实例之轮播图

轮播图的js代码中，我主要实现了4部分的功能：

1.小圆点点击切换图片，切换图片后小圆点变色；

2.左右箭头点击切换图片；

3.图片自动轮播

4.鼠标移入轮播图后停止自动轮播，鼠标移出后继续轮播；

js部分我使用的是class类封装，有兴趣的小伙伴还可以尝试自己用其他的方式写一写哦，我们直接看代码叭！

html代码：

    <div class="box">
      <ul class="item">
        <li style="opacity: 1"><img src="images/1.jpg" /></li>
        <li><img src="images/2.jpg" /></li>
        <li><img src="images/3.jpg" /></li>
        <li><img src="images/4.jpg" /></li>
        <li><img src="images/5.jpg" /></li>
      </ul>
      <button class="leftBtn">&lt;</button>
      <button class="rightBtn">&gt;</button>

      <ul class="page">
        <li style="background-color: white">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </div>

css代码：

   <style>

      .item li {
        list-style: none;
        width: 590px;
        height: 340px;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
        transition: opacity 300ms ease-in-out 0s;
      }

      img {
        width: 100%;
        height: 100%;
      }

      .leftBtn {
        position: absolute;
        left: 0;
        top: 0;
      }

      .rightBtn {
        position: absolute;
        right: 0;
        top: 0;
      }

      div {
        position: relative;
        width: 590px;
        height: 340px;
      }

      .page {
        position: absolute;
        bottom: 50px;
        left: 200px;
        height: 30px;
        /*width: 300px;*/
      }

      .page li {
        float: left;
        width: 30px;
        height: 30px;
        list-style: none;
        background: red;
        border-radius: 50%;
        line-height: 30px;
        text-align: center;
      }
    </style>

js代码：

<script>
      /*
             思路：
                选型卡
                1-记录当前的 页码 index
                2-
                  给下面的小点  加点击事件    让当前的图片显示 隐藏  ，当前显示小点 变红
                  小点的下标对应的 图片 显示  对应的小点 变白
                  index = i

                3-左右按钮
                   右按钮 点击事件      让当前的图片显示 隐藏  ，当前显示小点 变红
                    index++
                    小点的下标对应的 图片 显示  对应的小点 变白
                4- 自动播放
                   定时器  调用 rightBtn.onclick（）
                   移入 移出
        */
      //  创建类
      class Tab {
        
        constructor() {
          this.currentIndex = 0;
          this.pageLis = document.querySelectorAll(".page li");
          this.itemLis = document.querySelectorAll(".item li");
          this.rightBtn = document.querySelector(".rightBtn");
          this.leftBtn = document.querySelector(".leftBtn");
          this.box = document.querySelector(".box");
          this.timer = null;
        }

        pageFn() {
          // 小圆点添加点击功能
          let that = this;
          this.pageLis.forEach(function (v, i) {
            v.onclick = function () {
              v; //点击的按钮- i  点击按钮 对应的下标
              that.pageLis[that.currentIndex].style.backgroundColor = "red";
              that.itemLis[that.currentIndex].style.opacity = 0;

              v.style.backgroundColor = "white";
              that.itemLis[i].style.opacity = 1;

              // 修改页码
              that.currentIndex = i;
            };
          });
        }

        navBtnFn() {
          //解决方案2：使用箭头函数（内部的函数都是用箭头函数），使内外部的this指向保持一致

          this.rightBtn.onclick = () => {
            // if (currentIndex == 4) {
            //   return;
            // }
            // 当前隐藏-下一页出现
            console.log(this);
            console.log(this.nextPage);
            this.nextPage();
          };
          this.leftBtn.onclick = () => {
            // if (currentIndex == 4) {
            //   return;
            // }
            // 当前隐藏-下一页出现
            this.pageLis[this.currentIndex].style.backgroundColor = "red";
            this.itemLis[this.currentIndex].style.opacity = 0;

            // 获取下一页的页码
            let next = this.currentIndex - 1; //局部变量不需要绑定this
            if (this.currentIndex == 0) {
              next = 4;
            }

            // 下一页出现

            this.pageLis[next].style.backgroundColor = "white";
            this.itemLis[next].style.opacity = 1;

            this.currentIndex = next;
          };
        }

        nextPage() {
          this.pageLis[this.currentIndex].style.backgroundColor = "red";
          this.itemLis[this.currentIndex].style.opacity = 0;

          // 获取下一页的页码
          let next = this.currentIndex + 1;
          if (this.currentIndex == 4) {
            next = 0;
          }

          // 下一页出现
          this.pageLis[next].style.backgroundColor = "white";
          this.itemLis[next].style.opacity = 1;

          this.currentIndex = next;
        }

        autoPlayFn() {
          // setInterval(() => {
          //   nextPage()
          // }, 2000);
          this.timer = setInterval(() => {
            this.nextPage();
          }, 2000);

          this.box.onmouseenter = () => {
            clearInterval(this.timer);
            console.log("ok1");
          };
          this.box.onmouseleave = () => {
            this.timer = setInterval(() => {
              console.log("ok2");
              this.nextPage();
            }, 2000);
          };
        }

        init() {
          this.pageFn();
          this.navBtnFn();
          this.autoPlayFn();
          this.nextPage();
        }
      }

      let tab = new Tab();
      tab.init(); //可以在构造函数内部直接引用this.init()
    </script>

实现的效果如下：

 小伙伴们记得自己多多练习哦！