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

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 绑定左右箭头点击事件**
> 
> 
> 

//点击右边按钮
myKaTeX parse error: Undefined control sequence: \* at position 181: …te(ulObj,-index\̲*̲imgWidth); i…(“left”).οnclick=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”).οnmοuseοut=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. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）**  


![img](https://img-blog.csdnimg.cn/img_convert/26342feeb44b5fbefc2a83e2eca0584c.png)
![img](https://img-blog.csdnimg.cn/img_convert/df53c981f787c47d63c317ec3d3e592a.png)
![img](https://img-blog.csdnimg.cn/img_convert/b1e53f897be1680f7fc9f55dd8a5709d.png)

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

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

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

XYhQ9-1714341167837)]

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

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

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