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>

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