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
(
"
b
o
x
"
)
;
/
/
获取相框
l
e
t
i
n
n
e
r
=
b
o
x
.
c
h
i
l
d
r
e
n
[
0
]
;
/
/
获取去相框的宽度
l
e
t
i
m
g
W
i
d
t
h
=
i
n
n
e
r
.
o
f
f
s
e
t
W
i
d
t
h
;
/
/
获取
u
l
l
e
t
u
l
O
b
j
=
i
n
n
e
r
.
c
h
i
l
d
r
e
n
[
0
]
;
/
/
获取
u
l
中所有的
l
i
l
e
t
l
i
s
t
=
u
l
O
b
j
.
c
h
i
l
d
r
e
n
;
/
/
获取
o
l
l
e
t
o
l
O
b
j
=
i
n
n
e
r
.
c
h
i
l
d
r
e
n
[
1
]
;
/
/
获取焦点
l
e
t
a
r
r
=
m
y
("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
("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按本文顺序放一起就行
![img](https://img-blog.csdnimg.cn/img_convert/a4593eaad92adc3caa972bc9282b345d.png)
![img](https://img-blog.csdnimg.cn/img_convert/d98000c4fa13be5146c492e2c5117fe9.png)
![img](https://img-blog.csdnimg.cn/img_convert/098f24ed72be113bf54e1e63b69d15e3.png)
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
QyXct-1714551188532)]
**既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,涵盖了95%以上大数据知识点,真正体系化!**
**由于文件比较多,这里只是将部分目录截图出来,全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频,并且后续会持续更新**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**