原生js+css 实现轮播图 完整代码

利用原生的js实现轮播图，可以添加到自己的UI库中，在以后的项目中对其进行修改然后添加到已有项目中。

先写出css部分和html部分，直接上代码

  
  




  

    

      

      

      

    
    

    

      <
      >
    
  

轮播图的主体思想：设置了ul的position为absolute，然后通过改变left，拉动图片在silder框中显示不同的内容

轮播图步骤分解
1、最简单的轮播图，是图片1、2、3定时更换，那么我们实现
图片1——>图片2——>图片3——>图片1
我们在script标签加入以下代码

 window.onload=function () {
    var silder=document.getElementById('silder')
    var ul=silder.children[0]
    var imgWidth=silder.offsetWidth
    var key=0;
    setInterval(function () {
      key++
      if(key>ul.children.length-1){
        key=0;
      }
      ul.style.left=-key*imgWidth+'px'
    },1000)
  }

这样子的是一个独立更换图片的轮播图，如果我们想要丝滑地更换图片，如下

2、丝滑地切换图片
想要丝滑地切换图片，主要思想：设置定时器，一点点移动图片（ul的绝对定位位置即left属性）直到移动到最后的定位位置，取消定时器
问题：那么最后一张图片和第一张，怎么连接起来呢？
解决：在最后一张放上第一张图片，然后内部偷梁换柱定位到之前即可

 window.onload=function () {
    var silder=document.getElementById('silder')
    var ul=silder.children[0]
    var imgWidth=silder.offsetWidth
    var key=0;
    // 添加第一张图到最后
    ul.appendChild(ul.children[0].cloneNode(true))
    setInterval(function () {
      key++
      var innerTimer;
      var speed=-10;// 切换图片时每次移动距离
      innerTimer=setInterval(function () {
        //距离目标还需移动distance px
        var distance=Math.abs(key*imgWidth)-Math.abs(ul.offsetLeft)
        // 如果distance距离目的地不够再微移一次，则停止微移
        if(distance

3、添加图片的数字导航及鼠标移入停止轮播
代码如下

var silder = document.getElementById('silder')
  var ul = silder.children[0]
  var imgWidth = silder.offsetWidth

  var ol = silder.children[1]
  var globalTimer, key = 0;

  window.onload = function () {

    for (var i = 0, len = ul.children.length; i < len; i++) {
      var newLi = document.createElement('li')
      const index = i
      // 给数字下标设置鼠标移入事件，若
      newLi.onmouseover = function () {
        // 取消轮播定时器，
        clearInterval(globalTimer)
        setLiCurrent(index)
        key = index;
        animate(-key*imgWidth)
      };
      newLi.innerHTML = i + 1;
      ol.appendChild(newLi)
    }
    // 初始化选中的下标
    setLiCurrent(0)
    // 添加第一张图到最后
    ul.appendChild(ul.children[0].cloneNode(true))
    // 播放轮播图
    globalTimer = setInterval(autoPlay, 1000)
    silder.onmouseover = function () {
      clearInterval(globalTimer)
    }
    silder.onmouseout = function () {
      globalTimer = setInterval(autoPlay, 1000)
    }
  }

  function setLiCurrent(index) {
    for (var i = 0, len = ol.children.length; i < len; i++) {
      ol.children[i].className = ''
    }
    ol.children[index].className = 'current'
  }

  var ulTimer

  function animate(goal) {
    clearInterval(ulTimer)
    var distance = goal - ul.offsetLeft;
    const speed = distance > 0 ? 10 : -10
    ulTimer = setInterval(function () {
      if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {
        ul.style.left = ul.offsetLeft + speed + 'px'
      } else {
        ul.style.left = goal
      }
    }, 10)
  }

  function autoPlay() {
    key++
    if(key>ul.children.length-1){
      ul.style.left=0
      key=1;
    }
    animate(-key*imgWidth)
    setLiCurrent(key>ol.children.length-1?0:key)
  }

4、添加左右滑动按钮
代码如下

var silder = document.getElementById('silder')
  var ul = silder.children[0]
  var imgWidth = silder.offsetWidth
  var ol = silder.children[1]
  var silder_btn = silder.children[2]

  var globalTimer, key = 0;

  window.onload = function () {

    for (var i = 0, len = ul.children.length; i < len; i++) {
      var newLi = document.createElement('li')
      const index = i
      // 给数字下标设置鼠标移入事件，若
      newLi.onmouseover = function () {
        // 取消轮播定时器，
        clearInterval(globalTimer)
        setLiCurrent(index)
        key = index;
        animate(-key * imgWidth)

      };
      newLi.innerHTML = i + 1;
      ol.appendChild(newLi)
    }
    // 初始化选中的下标
    setLiCurrent(0)
    // 对滑动按钮进行点击事件注册
    silder_btn.children[0].onclick = function () {
      console.log(key)
      key = key - 1 >= 0 ? key - 1 : 0
      animate(-key * imgWidth)
      setLiCurrent(key)
    }
    silder_btn.children[1].onclick = function () {
      console.log(key)
      key = key + 1 >= ol.children.length-1?ol.children.length-1: key + 1
      animate(-key * imgWidth)
      setLiCurrent(key)
    }
    // 添加第一张图到最后
    ul.appendChild(ul.children[0].cloneNode(true))
    // 播放轮播图
    globalTimer = setInterval(autoPlay, 1000)
    silder.onmouseover = function () {
      clearInterval(globalTimer)
      setSilderBtn('block')
    }
    silder.onmouseout = function () {
      globalTimer = setInterval(autoPlay, 1000)
      setSilderBtn('none')
    }
  }

  function setLiCurrent(index) {
    for (var i = 0, len = ol.children.length; i < len; i++) {
      ol.children[i].className = ''
    }
    ol.children[index].className = 'current'
  }

  var ulTimer

  function animate(goal) {
    clearInterval(ulTimer)
    var distance = goal - ul.offsetLeft;
    const speed = distance > 0 ? 10 : -10
    ulTimer = setInterval(function () {
      if (Math.abs(goal - ul.offsetLeft) >= Math.abs(speed)) {
        ul.style.left = ul.offsetLeft + speed + 'px'
      } else {
        ul.style.left = goal
      }
    }, 10)
  }

  function autoPlay() {
    key++
    if (key > ul.children.length - 1) {
      ul.style.left = 0
      key = 1;
    }
    animate(-key * imgWidth)
    setLiCurrent(key > ol.children.length - 1 ? 0 : key)
  }

  function setSilderBtn(option) {
    for (var i = 0, len = silder_btn.children.length; i < len; i++) {
      silder_btn.children[i].style.display = option
    }
  }

至此，整个轮播图就算已经完工了