1、动态获取小圆圈。
// 动态获取小圆圈
// 1、循环img_box的li,创建li，添加到circle里面
var img_box = document.querySelector('.img_box');
var lis = img_box.querySelectorAll('li');//图片
var circle = document.querySelector('.circle')
console.log(lis);
for(var i = 0; i < lis.length; i++) {
var btns = document.createElement('li');//创建小圆圈按钮
circle.appendChild(btns);//添加到circle里 父前子后
// 第一个小圆圈添加样式；
circle.children[0].className = 'current';
}
2、点击小圆圈切换样式。
// 点击小圆圈 切换样式；
btns.addEventListener('click',function() {
// 获取小圆圈
var cir_btns = circle.querySelectorAll('li');
// 循环删除所有小圆圈的样式；
for(var i = 0; i < cir_btns.length; i++) {
cir_btns[i].className = '';
cir_btns[i].index = i ;
}
//留下自己；
this.className = 'current';
// 获取点击的按钮索引号
var index = this.index;
})
3、点击小圆圈切换到对应的图片。
// 切换到对应的图片
// 调用animate函数，写入两个值：要移动的盒子，距离
animate(img_box, -index * 400);
4、鼠标经过图片盒子左右按钮显示，离开消失。
// 鼠标经过图片盒子，左右箭头出现，离开消失；
var box = document.querySelector('.box');
var arrow_r = document.querySelector('.arrow_r')
var arrow_l = document.querySelector('.arrow_l')
box.addEventListener('mouseenter',function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
});
box.addEventListener('mouseleave',function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
autoPlay();
})
5、点击右按钮，显示下一张图片，对应小圆圈切换样式。
// 点击右箭头，滑动到下一张图片；
var num = 0;
var circle_btns = 0;
arrow_r.addEventListener('click',function() {
num++;
// 当num大于当前图片数量，则返回0,盒子距离也返回0，第一张；
if(num >= 3) {
num = 0;
img_box.style.left = 0;
}
console.log(num);
circle_btns++;
// 当 circle_btns大于当前按钮数量，则返回0，第一张；
if(circle_btns > 2) {
circle_btns = 0;
}
console.log(circle_btns);
// 图片盒子移动
animate(img_box,- num * 400);
circlestyle();
})
// 对应小圆圈添加样式 其他清除样式；
// 封装一个函数;
function circlestyle() {
for(var i = 0; i < circle.children.length; i++) {
circle.children[i].className = '';
}
//留下自己；
circle.children[circle_btns].className = 'current';
}
6、当滑动到num=3时，因为没有图片所以会露出背景色的bug，解决方法：动态克隆第一张图片添加到图片盒子里；
// 获取元素
var imgone = img_box.children[0].cloneNode(true);
img_box.appendChild(imgone);
7、点击左按钮，显示上一张图片，对应小圆圈切换样式。
// 点击左箭头，滑动到上一张图片；
arrow_l.addEventListener('click',function() {
num--;
// 当num大于当前图片数量，则返回0，第一张；
if(num < 0) {
num = 2;
animate(img_box,-1600);
}
circle_btns--;
if(circle_btns < 0) {
circle_btns = 2;
}
console.log(circle_btns);
// 图片盒子移动
animate(img_box,- num * 400);
circlestyle();
})
8、开启计时器，自定点击右按钮。
(在mouseenter里清除定时器，在mouseleave中开启定时器；)
// 开启定时器，自动点击右箭头；
var timer = null;
function autoPlay(){
timer = setInterval(function() {
arrow_r.click();
},2000);
}
autoPlay();
CSS
* {
padding: 0;
margin: 0;
text-decoration: none;
list-style: none;
}
.box {
position: relative;
margin: 100px auto;
width: 400px;
height: 300px;
background-color: darkred;
overflow: hidden;
}
.box .img_box {
position: absolute;
left: 0;
top: 0;
width: 1600px;
height: 100%;
z-index: 1;
}
.img_box li>img {
float: left;
width: 400px;
height: 300px;
object-fit: cover;
}
.circle {
position: absolute;
bottom: 20px;
left: 40%;
z-index: 2;
}
.circle>li {
float: left;
margin-right: 6px;
width: 14px;
height: 14px;
border: 2px #fff solid;
border-radius: 50%;
cursor: pointer;
}
.circle .current {
background-color: #fff;
}
.arrow_l,
.arrow_r {
position: absolute;
top: 40%;
display: none;
width: 30px;
background-color: rgba(255, 255, 255, .3);
z-index: 3;
color: #fff;
}
.arrow_r {
right: 0;
}
.icon-ctrl1,.icon-ctrl2 {
font-size: 30px;
}
.icon-ctrl1:hover {
color: red;
}
.icon-ctrl2:hover {
color: red;
}
HTML
<!-- 大盒子套三个小盒子，分别是图片盒子，圆圈按钮盒子，左右箭头盒子 -->
<div class="box">
<ul class="img_box">
<li>
<img src="./images/3.jpg" alt="">
</li>
<li>
<img src="./images/4.jpg" alt="">
</li>
<li>
<img src="./images/5.png" alt="">
</li>
</ul>
<!-- 小圆圈按钮 -->
<ol class="circle">
</ol>
<!-- 左右箭头 -->
<a href="JavaScript:;" class="arrow_l">
<span class="icon-ctrl1"></span>
</a>
<a href="JavaScript:;" class="arrow_r">
<span class="icon-ctrl2"></span>
</a>
</div>
</body>
<script src="./animate.js"></script>
<script src="./index.js"></script>
网友评论