js编写轮播图效果

本文实例为大家分享了js实现轮播图效果的具体代码，供大家参考，具体内容如下

1、htML部分

div id="box">
        ul>
          li class="show">
    img src="img/1.jpg" alt="">
    /li>
          li>
    img src="img/2.jpg" alt="">
    /li>
          li>
    img src="img/3.jpg" alt="">
    /li>
          li>
    img src="img/4.jpg" alt="">
    /li>
          li>
    img src="img/5.jpg" alt="">
    /li>
          li>
    img src="img/6.jpg" alt="">
    /li>
        /ul>
        img src="img/l.png" alt="" id="lef">
        img src="img/r.png" alt="" id="rig">
        ol>
          li class="focus" data-i = "0">
    /li>
          li data-i = "1">
    /li>
          li data-i = "2">
    /li>
          li data-i = "3">
    /li>
          li data-i = "4">
    /li>
          li data-i = "5">
    /li>
        /ol>
    /div>
    

2、js部分

 script>
    VAR liList = document.querySelectorAll("#box ul li")    var olList = document.querySelectorAll("#box ol li")    var rig = document.getElementById("rig")    var lef = document.getElementById("lef")    var index = 0    function setLi(){
          for(var i = 0;
    i liList.length;
i++){
        liList[i].classname = ""        olList[i].className = ""      }
      liList[index].className = "show"      olList[index].className = "focus"    }
    // 向右    rig.onclick = function(){
      if(index !== 5){
        index++      }
      if(index === 5){
        index = 0    }
    setLi()  }
  //向左  lef.onclick = function(){
            if(index !== 0){
        index--      }
      if(index === 0){
        index = 5    }
    setLi()  }
      //圆点  for(var i = 0;
    i  olList.length;
i++){
    olList[i].onclick = function(){
      index = this.getAttribute("data-i")      setLi()    }
  }
  //计时  var autoplay = setInterval(    function(){
      rig.click()    }
,3000)  //鼠标划上停止播放  var box = document.querySelector("div")  box.onmouseenter = function(){
    clearInterval(autoPlay)  }
  // 鼠标移走继续播放  box.onmouseleave = function(){
    autoPlay = setInterval(    function(){
      rig.click()    }
,3000)  }
    /script>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript实现循环轮播图
• JS原生实现轮播图的几种方法
• 基于JavaScript实现简单的轮播图
• JavaScript仿京东轮播图效果
• JavaScript Dom实现轮播图原理和实例
• 原生js实现无缝轮播图效果
• js实现移动端轮播图滑动切换
• javascript实现滚轮轮播图片
• 原生Js 实现的简单无缝滚动轮播图的示例代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！