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

最新推荐文章于 2024-06-27 19:39:09 发布

Mandy Ma

最新推荐文章于 2024-06-27 19:39:09 发布

阅读量1.6k

点赞数 4

分类专栏： css JavaScript 笔记

本文链接：https://blog.csdn.net/weixin_44541490/article/details/97134056

版权

笔记同时被 3 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3</title>
</head>
<style>
   * {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
  }

  .all {
    position: relative;
    width: 500px;
    height: 200px;
    border: 1px solid black;
    padding: 7px;
    margin: 100px auto;
  }

  .silder {
    overflow: hidden;
    width: 500px;
    height: 200px;
    position: relative;
  }

  .silder ul {
    position: absolute;
    top: 0;
    width: 3000px;
    height: 200px;
  }

  .silder li {
    height: 200px;
    float: left;
  }

  .silder ol {
    position: absolute;
    bottom: 5px;
    right: 20px;
    height: 20px;
  }

  .silder ol li {
    margin: 0 5px;
    background: #fff;
    line-height: 20px;
    width: 20px;
    height: 20px;
    text-align: center;
  }

  .current {
    background: yellow !important;
  }
  .arr span{
    width: 40px;
    height: 40px;
    position: absolute;
    top: 50%;
    margin-top: -20px;
    background: #000;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    font-weight: bold;
    font-family: '黑体';
    font-size: 30px;
    color: #fff;
    opacity: 0.3;
    border: 1px solid #fff;
  }
  .left{
    left: 5px;
  }
  .right{
    right: 5px;
  }
</style>
<body>
<div class="all">
  <div class="silder" id="silder">
    <ul>
      <li><img src="./img/1.jpg" width="500" height="200"/></li>
      <li><img src="./img/2.jpg" width="500" height="200"/></li>
      <li><img src="./img/3.jpg" width="500" height="200"/></li>
    </ul>
    <ol></ol>
    <div class="arr">
      <span class="left"><</span>
      <span class="right">></span>
    </div>
  </div>
</div>
</body>
<script>
</script>
</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<Math.abs(speed)){
          clearInterval(innerTimer)
          ul.style.left=-key*imgWidth+'px'
          if(key===ul.children.length-1){
            //如果是从最后一张图开始移动，则偷梁换柱到第一张图
            key = 0;
            ul.style.left=0
          }
        }else{
          ul.style.left=ul.offsetLeft+speed+'px'
        }
      },10)

    },1000)
  }

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
    }
  }