利用原生JavaScript怎么实现一个pc端的轮播图效果-创新互联

利用原生JavaScript怎么实现一个pc端的轮播图效果?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

成都创新互联专注于望江网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供望江营销型网站建设,望江网站制作、望江网页设计、望江网站官网定制、微信小程序服务,打造望江网络公司原创品牌,更为您提供望江网站排名全网营销落地服务。

案例:轮播图需求


布局:ul下有很多li标签;浮动在一行;

原理:切换图片的时候,把ul位置修改一下,给ul的父容器,设置一个 overflow:hidden;


功能需求:

  • 序号轮播

  • 左右按钮的轮播

  • 自动轮播

  • 鼠标在轮播图里面的时候,停止自动轮播,离开后继续自动轮播


实现效果:

利用原生JavaScript怎么实现一个pc端的轮播图效果

html部分


    
      
        
  •                    
  •         
  •                    
  •         
  •                    
  •         
  •                    
  •         
  •                    
  •         
  •                    
  •                       1         2         3         4         5         6       
                   <         >       
        

    css部分

    * {
          margin: 0;
          padding: 0;
        }
        
        ul {
          list-style: none;
        }
        
        .box {
          width: 730px;
          height: 454px;
          padding: 8px;
          border: 1px solid green;
          margin: 100px auto;
        }
        
        .inner {
          position: relative;
          overflow: hidden;
          height: 454px;
        }
        
        #imglist {
          width: 700%;
          position: absolute;
          left: 0;
          transition: left 300ms linear;
        }
        
        li {
          float: left;
        }
        
        .list {
          position: absolute;
          bottom: 20px;
          left: 50%;
          margin-left: -85px;
        }
        
        .list i {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #fff;
          color: #333;
          float: left;
          font-style: normal;
          line-height: 20px;
          font-size: 14px;
          text-align: center;
          margin-right: 10px;
          cursor: pointer;
        }
        
        .list i:last-child {
          margin-right: 0;
        }
        
        .list i.current {
          background-color: skyblue;
          color: #fff;
        }
        
        .arrow {
          position: absolute;
          width: 100%;
          top: 50%;
          margin-top: -30px;
        }
        
        .arrow-left,
        .arrow-right {
          width: 30px;
          height: 60px;
          position: absolute;
          font: 20px/60px "consolas";
          color: #fff;
          background-color: rgba(0, 0, 0, .3);
          text-align: center;
          cursor: pointer;
        }
        
        .arrow-right {
          right: 0;
        }

    js部分:

     // 获取DOM
      var yuan = document.querySelectorAll("i");
      var li = document.querySelector("ul li");
      var ul = document.querySelector("ul");
      var imgs = document.querySelector("#imglist");
      var right = document.querySelector(".arrow-right");
      var left = document.querySelector(".arrow-left");
      var box = document.querySelector(".box");
      window.onload = function() {
        //------------------------------------这里是点击小圆圈,控制图片的切换
        //循环小圆点 注册小圆点
        for (var i = 0; i < yuan.length; i++) {
          //我们需要这里面的i 必须提前拿出来,要不最后i的值就是最后一个数值了
          yuan[i].num = i;
          //注册事件
          yuan[i].onmouseover = function() {
            // 现在要循环将样式移除
            for (var j = 0; j < yuan.length; j++) {
              yuan[j].classList.remove("current");
            }
            //这里是为了将点击的小圆点 增加上样式
            this.classList.add("current");
            var num = this.num;
            //到这里的思路就是点击小圆点 将图片进行移动,向左面移动,上面css做了相应的定位操作
            //移动的距离就是 n 乘以 一张图片的宽度,
            //n 就是选择的小圆点的 坐标-----i(num)
            //图片的宽度 box.offsetWidth
            var left = num * li.offsetWidth;
            // console.log(num, box.offsetWidth, left);
            imgs.style.left = `-${left}px`;
    
            //这里小原点联动左右按钮
            for (var p = 0; p < yuan.length; p++) {
              //清除全部样式(小圆点)
              yuan[p].classList.remove("current");
            }
            //给当前的小圆点增加样式
            yuan[num].classList.add("current");
            //这里这个位置比较关键,在上面设置完样式之后,记得将此num赋值给全局的index
            index = this.num;
    
    
          }
        }
        //------------------------------------以上是点击小圆圈,控制图片的切换
        //------------------------------------下面是开始右面轮播,控制图片的切换
        //首先定义一个全局的index,这个index的作用依旧是控制图片的切换
        var index = 0;
        right.onclick = function() {
          index++;
          //这里要对index做一下判断,如果不做判断,可以试想一下,
          //只要你一点击,index就会无限的增大,增大到你“无法自拔”
          if (index == ul.children.length) {
            //如果坐标为6的话,显示应该显示第1张图片,所以要复位 即index=0
            index = 0;
          }
          var left = index * li.offsetWidth;
          // console.log(index, box.offsetWidth, left);
          imgs.style.left = `-${left}px`;
    
          //点击右面增加联动小圆点的效果
          for (var n = 0; n < yuan.length; n++) {
            //清除全部样式(小圆点)
            yuan[n].classList.remove("current");
          }
          //给当前的小圆点增加样式
          yuan[index].classList.add("current");
        };
        //------------------------------------以上是结束右面轮播,控制图片的切换
    
        //------------------------------------下面是开始左面轮播,控制图片的切换
        left.onclick = function() {
          index--;
          //这里同右点击一样,需要做一下判断,
          console.log(index);
          if (index == -1) {
            index = ul.children.length - 1;
          }
          var left = index * li.offsetWidth;
          // console.log(index, box.offsetWidth, left);
          // console.log(left);
          imgs.style.left = `-${left}px`;
    
          //这个位置做的是 左面点击联动小圆点
          for (var m = 0; m < yuan.length; m++) {
            //清除全部样式(小圆点)
            yuan[m].classList.remove("current");
          }
          //给当前的小圆点增加样式
          yuan[index].classList.add("current");
        };
        //------------------------------------上面是结束左面轮播,控制图片的切换
        //------------------------------------开始设置自动轮播
        var timer = setInterval(function() {
          right.onclick();
        }, 1000);
        //------------------------------------以上是自动轮播结束
        //------------------------------------设置鼠标进来就停止开始
        box.onmouseover = function() {
          clearInterval(timer);
        };
        //------------------------------------设置鼠标进来就停止结束
        //------------------------------------设置鼠标出去就停止开始
        box.onmouseout = function() {
          timer = setInterval(function() {
            right.onclick();
          }, 1000);
        };
        //------------------------------------设置鼠标出去就停止结束
      }

    看完上述内容,你们掌握利用原生JavaScript怎么实现一个pc端的轮播图效果的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


    网页名称:利用原生JavaScript怎么实现一个pc端的轮播图效果-创新互联
    分享URL:http://scyanting.com/article/dsdodh.html

    其他资讯