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";
}
};
//点击左边按钮
![img](https://img-blog.csdnimg.cn/img_convert/770d293983506b9222523b5825be38be.png)
![img](https://img-blog.csdnimg.cn/img_convert/09a8aa5465714b5978b0464400696e19.png)
**网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**
上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。**
**[需要这份系统化资料的朋友,可以戳这里获取](https://bbs.csdn.net/topics/618545628)**
**一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!**