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

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

需要这份系统化资料的朋友，可以戳这里获取

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

         <span id="right">></span>
        </div>
    </div>
</body>  
<script src="./index.js"></script>    

> 
> ### 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");//获取相框letinner=box.children[0];//获取去相框的宽度letimgWidth=inner.offsetWidth;//获取ulletulObj=inner.children[0];//获取ul中所有的liletlist=ulObj.children;//获取olletolObj=inner.children[1];//获取焦点letarr=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”).οnmοuseοver=function(){
arr.style.display=“block”;
clearInterval(timeId);
};

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

//点击右边按钮
my$(“right”).οnclick=clickHandle;
function clickHandle() {
if (indexulObj.children.length-1){
ulObj.style.left=0+“px”;
index=0;
}
index++;
animate(ulObj,-index*imgWidth);
if (indexlist.length-1){

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

中…(img-DeaztSau-1715836010717)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取