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

本文链接：https://blog.csdn.net/2401_84185397/article/details/138433798

1. 项目效果图

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

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); //移动动画函数
  };
 }


![img](https://img-blog.csdnimg.cn/img_convert/ca976dc729e27262c864b6546405dae0.png)
![img](https://img-blog.csdnimg.cn/img_convert/f9988a428bf6d084e2bb9c52c76a7b12.png)

**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**

上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化资料的朋友，可以戳这里获取](https://bbs.csdn.net/topics/618545628)**


**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**