零基础也能学会，原生JS实现图片轮播（附源码，拿去即用）

雨点打透心脏的1/2处 2022-10-06 08:55 109阅读 0赞

### JavaScript —— 原生JS实现图片轮播 ###

*   *  1. 项目效果图
     *  2. 基础布局（index.html）
     *  3. CSS 样式（index.css）
     *  4. JS部分（做了详细注释）
     *  5. FAQ

*  **首先，祝大家端午安康，发大财！一夜暴富**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]

## 1. 项目效果图 ##

*  技术栈（原生JS），**真正高端的效果往往只需要简单质朴的JS就能实现**
 *  可以点击左右箭头切换图片
 *  鼠标悬浮在数字上也可切换图片
 *  设置了定时器，会自动轮播
 *  用到了animate，效果非常丝滑  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]

## 2. 基础布局（index.html） ##

*  这里非常简单，不做过多解释

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>轮播图</title>
            <link rel="stylesheet" type="text/css" href="./index.css"  />
            <style>
            </style>
        </head>
        <body>
            <h1>原生JS实现轮播图</h1>
            <div id="box" class="all">
                <div class="inner"> 
                 <ul>
                    <li><a href="#"><img src="img/1.jpg" width="550" height="320" alt=""></a></li>
                    <li><a href="#"><img src="img/2.jpg" width="550" height="320" alt=""></a></li>
                    <li><a href="#"><img src="img/3.jpg" width="550" height="320" alt=""></a></li>
                    <li><a href="#"><img src="img/4.jpg" width="550" height="320" alt=""></a></li>
                 </ul>
                 <ol> 
                
                 </ol>
                </div>
                <div class="focusD" id="arr">
                 <span id="left"><</span>
                 <span id="right">></span>
                </div>
            </div>
        </body>  
        <script src="./index.js"></script>    
    </html>

> ## 3. CSS 样式（index.css） ##

* { 
        margin: 0;
        padding: 0;
       }
       h1{ 
           text-align: center;
           margin-top: 150px;
       }
       /*<--清除底部三像素距离-->*/
       img { 
        vertical-align: top;
       }
      
       .all { 
        width: 550px;
        height: 320px;
        margin: 100px auto;
        padding: 5px;
        border: 1px solid #ccc;
        position: relative;
       }
      
       .inner { 
        position: relative;
        width: 550px;
        height: 320px;
        background-color: pink;
        overflow: hidden;
       }
      
       .inner ul { 
        width: 1000%;
        list-style: none;
        position: absolute;
        top: 0;
        left: 0;
       }
      
       .inner ul li { 
        float: left;
       }
      
       .focusD { 
        position: absolute;
        left: 0;
        top: 50%;
        width: 550px;
        padding: 0 10px;
        height: 30px;
        box-sizing: border-box;
        display: none;
       }
      
       .inner ol { 
        position: absolute;
        right: 30px;
        bottom: 10px;
       }
      
       .inner ol li { 
        width: 15px;
        display: inline-block;
        height: 15px;
        margin: 0 3px;
        cursor: pointer;
        line-height: 15px;
        text-align: center;
        background-color: #fff;
       }
       /*当前的高亮的小圆点*/
       .inner ol .current { 
        background-color: orange;
        color: #fff;
       }
      
       .focusD span { 
        display: inline-block;
        width: 25px;
        font-size: 24px;
        height: 30px;
        color: #ccc;
        line-height: 30px;
        text-align: center;
        background: rgba(255, 255, 255, 0.3);
        cursor: pointer;
       }
      
       #left { 
        float: left;
       }
      
       #right { 
        float: right;
     }

## 4. JS部分（做了详细注释） ##

> **4.1 获取需要操作的元素**

let index=0;
    //获取最外面的div
    let box = my$("box");
    //获取相框
    let inner = box.children[0];
    //获取去相框的宽度
    let imgWidth = inner.offsetWidth;
    // 获取ul
    let ulObj = inner.children[0];
    //获取ul中所有的li
    let list = ulObj.children;
    //获取ol
    let olObj = inner.children[1];
    //获取焦点
    let arr = my$("arr");

> **4.2 创建小圆点，及设置背景色**

//创建小按钮-----根据ul中li的个数
     for (let i = 0; i < list.length; i++) { 
      let liObjs = document.createElement("li");
      olObj.appendChild(liObjs);
      liObjs.innerHTML = (i + 1);
      //在ol中每个li中增加自定义属性，添加索引值
      liObjs.setAttribute("index", i);
      //注册鼠标进入事件
      liObjs.onmouseover = function () { 
       //先干掉所有背景颜色
       for (let j = 0; j < olObj.children.length; j++) { 
        olObj.children[j].removeAttribute("class");
       }
       //设置当前鼠标进来的类样式
       this.className = "current";
       //获取ol中li的索引值
        index = this.getAttribute("index");
       //移动ul
       animate(ulObj, -index * imgWidth); //移动动画函数
      };
     }
     //设置第一个ol中li的背景颜色
     olObj.children[0].className = "current";
     //克隆ol中第一个li放到最后一个
     ulObj.appendChild(ulObj.children[0].cloneNode(true));

> **4.3 设置定时器（定时轮播）**

let timeId=setInterval(clickHandle,3000);
     
     my$("box").onmouseover=function(){ 
      arr.style.display="block";
      clearInterval(timeId);
     };

> **4.4 绑定左右箭头点击事件**

//点击右边按钮
      my$("right").onclick=clickHandle;
      function clickHandle() { 
       if (index==ulObj.children.length-1){ 
        ulObj.style.left=0+"px";
        index=0;
       }
       index++;
       animate(ulObj,-index*imgWidth);
       if (index==list.length-1){ 
        olObj.children[0].className="current";
        olObj.children[olObj.children.length-1].className="";
       }else { 
        for (let i=0;i<olObj.children.length;i++){ 
         olObj.children[i].className="";
        }
        olObj.children[index].className="current";
       }
      };
      //点击左边按钮
      my$("left").onclick=function () { 
       if (index==0){ 
        index=list.length-1;
        ulObj.style.left=-index*imgWidth+"px";
       }
       index--;
       animate(ulObj,-index*imgWidth);
       for (let i=0;i<olObj.children.length;i++){ 
        olObj.children[i].className="";
       }
       olObj.children[index].className="current";
      };
     
     my$("box").onmouseout=function(){ 
      arr.style.display="none";
      timeId=setInterval(clickHandle,3000);
     };
     
     
     
     // 设置一个元素，移动到指定位置
     function animate(element, target) { 
      clearInterval(element.timeId);
      element.timeId = setInterval(function () { 
       let current = element.offsetLeft;
       let step = 9;
       step = current > target ? -step : step;
       current += step;
       if (Math.abs(target - current) > Math.abs(step)) { 
        element.style.left = current + "px";
       } else { 
        clearInterval(element.timeId);
        element.style.left = target + "px";
       }
      }, 10);
     }
    function my$(id) { 
     　　 return document.getElementById(id);
    }

## 5. FAQ ##

*  注意各文件引入路径
 *  需要自己找几张图片
 *  JS文件一个就可，将所有JS按本文顺序放一起就行
 *  **大家有啥问题可以加微信交流（在个人主页）**，无任何广告，大神坐镇，干货满满
 *  个人QQ：2567040816

> **1. 希望本文能对大家有所帮助，如有错误，敬请指出**
> 
> **2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  
> **3. 拜谢各位**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: /images/20221005/81213c2d7f7d4efc9c9c7508b77fb628.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: /images/20221005/eb8edea10dca4c119841a124586355b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: /images/20221005/4983df8609bf421ea520c00cbb5e9d2e.png