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

野性酷女 2021-11-27 07:52 216阅读 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属性）直到移动到最后的定位位置，取消定时器  
问题：那么最后一张图片和第一张，怎么连接起来呢？  
解决：在最后一张放上第一张图片，然后内部偷梁换柱定位到之前即可

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

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

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