轮播图js控制实现

如何写轮播图

利用function函数封装和for循环遍历来写轮播图

• 先来看看H5部分

  <div class="banner">
        <div class="banner-con">
            <!-- 图片列表 -->
            <ul>
                <li>
                    <!-- 每个li之中1个图 -->
                    <img src="./img/11.png" id=list alt="">
                </li>
                <li>
                    <!-- 每个li之中1个图 -->
                    <img src="./img/12.png" id=list alt="">
                </li>
                <li>
                    <!-- 每个li之中1个图 -->
                    <img src="./img/13.png" id=list alt="">
                </li>
                <li>
                    <!-- 每个li之中1个图 -->
                    <img src="./img/14.png" id=list alt="">
                </li>
                <li>
                    <!-- 每个li之中1个图 -->
                    <img src="./img/15.jpg" id=list alt="">
                </li>

            </ul>
            <ol>
                <li id=11 class="active"></li>
                <li id=12></li>
                <li id=13></li>
                <li id=14></li>
                <li id=15></li>
            </ol>
            <div class="left-arrow show">
                < </div> <div class="box">
            </div>
            <div class="right-arrow show">
                > </div>
            <div class="box">
            </div>
        </div>
    </div>
    </div>

• 对应的样式：

  * {
      margin: 0;
      padding: 0;
  }

  .banner {
      margin-top: 100px;
      width: 100%;
      height: 480px;
      background: rgba(144, 196, 254, 80);
      /* background-color: rgba(26, 57, 39, 80); */
      position: relative;
  }

  .banner-con {
      width: 890px;
      margin: auto;
      position: relative;
      list-style: none;
  }
  .banner-con img {
      top: 0;
      left: 0;
       position: absolute;
      height: 100%;
      width: 890px;
      height: 480px;
      /* transform: 1s linear ; */

      /* xiaoguo */


  }

  ul {
      list-style: none;
  }

  ol {
      list-style: none;
      position: absolute;
      height: 15px;
      width: 240px;
       left: 50%;
      margin-left: -120px;
      margin-top: 400px;
      text-decoration: none;
  }
  ol li {
      background-color: #fffFFF80;
      width: 30px;
      height: 10px;
      float: left;
      margin-left: 15px;
      line-height: 15px;
      color: white;
  }
  ol li:hover {
      background-color: orange;
  }
  .left-arrow {
      position: absolute;
      /* position: relative; */
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      left: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .right-arrow {
      position: absolute;
      background-color: #00000040;
      width: 20px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      font-size: 24px;
      right: 0;
      top: 190px;
      color: white;
      border-radius: 5px;
  }
  .active {
      background-color: yellow;
  }

• 最后是相应的js部分

   <script>
        //页面加载
        //1.一步：获取所有的图片列表
        // 2.默认第一张
        // 设置默认下表为0
        //3.每隔两秒切换图片   
        // 切换当前图片下标记
        //让当前下表对应的图片显示
        //  让其他图片消失
        // 由于图片走到第五章以后会报错
        // 需要临界值进行判断
        // 淡入淡出效果  Transform
        // 6.  切换我们的图片对应的背景颜色
        // 放到一个数组里面，背景颜色对应图片
        // 7.图片切换的时候切换背景颜色
        //8.获取整个banner事件
        //9.给banner设置鼠标移入，停止定时器
        //10.鼠标移出，计需定时器
        //获取所有的图片
        //点击右箭头和默认定时器一致
        // 12点击左键头，下标-1，临界值判断，小于第一张的时候自动跳转
        // 13.默认第一个轮播点高亮显示
        // 14.获取轮播点，图片切换的时候轮播点也跟着切换
        // 15 给每一个轮播点设置点击事件， 
        // 点击哪个轮播点， 轮播点高亮，其他取消高亮，
        // 当前轮播点对应的图片显示， 其他图片消失
   window.onload = function () {
  var imgs = document.querySelectorAll(".banner> .banner-con > ul > li");                                                           //获取所有图片
   var banner = document.querySelector(".banner") //获渠banner背景色
   var color = ['red', 'blue', 'black', 'yellow', 'orange']; //五个颜色   
   var piece = document.querySelectorAll("ol > li"); //获取轮播点
   var leftrow = document.querySelector(".left-arrow"); //左右箭头
   var rightrow = document.querySelector(".right-arrow");
   var index = 0; //下标设置为0
         //函数封装
          function move() {
           index++;
          for (var i = 0; i < imgs.length; i++) {
             imgs[i].style.opacity = 0; //图片全部隐藏
            piece[i].classList.remove("active") //清除所有的轮播点
            if (index == 5) {
                        index = 0; //图片返回到开头
                   }
             imgs[index].style.opacity = 1; //让当前下标对应的图片显示
             banner.style.background = color[index]; //改变最大的背景色
           piece[index].classList.add("active"); // 添加当前轮播点的颜色高亮
} }
            //左键头
        function move1() {
         index--;
         for (var j = 0; j < imgs.length; j++) { //循环次数
               imgs[j].style.opacity = 0;
              piece[index].classList.remove("active"); //移除所有的高亮
                }
                if (index < 0) {
                    index = imgs.length - 1;
                }
                //让当前下表对应的图片显示
                imgs[index].style.opacity = 1;
                banner.style.background = color[index];
                piece[index].classList.add("active");//给所有的轮播点添加色块
            }
            function move2() {
                //右键头
                index++;
                for (var j = 0; j < imgs.length; j++) {
                  imgs[j].style.opacity = 0;
                  if (index > imgs.length - 1) {
                       index = 0;
                   }}
                //让当前下表对应的图片显示
                imgs[index].style.opacity = 1;
                banner.style.background = color[index];
            }
             var t = setInterval(move, 2000);
            // 鼠标移入
            banner.onmouseover = function () {
                clearInterval(t);
            }
            //鼠标移出
            banner.onmouseout = function () {
                t = setInterval(move, 2000);
            }
            //左右鼠标点击事件
            leftrow.onclick = function () {
                move1();
            }
            rightrow.onclick = function () {
                move2();
            }
            //轮播点移入移出             
            for (var k=0;k<piece.length;k++){  //轮播点循环次数
              piece[k].setAttribute("name",k);//设置下标
              piece[k].onclick=function(){   //小轮播点的点击事件
              var int=this.getAttribute("name");  //获取当前下标
              for(var m=0;m<imgs.length;m++){    
             imgs[m].style.opacity=0;   //图片显示消失 
             piece[m].classList.remove("active");  //移除色块的高亮
                }
             imgs[int].style.opacity=1;
             piece[int].classList.add("active");
             banner.background=color[int];
             } } }
    </script>

本文地址：https://blog.csdn.net/weixin_43615570/article/details/112228349