仿京东轮播图,如下图:
需求:
- 鼠标移入左下角小圆点,图片轮播
- 鼠标点击左右按钮,图片轮播
- 自动轮播,当鼠标移入轮播图盒子,停止自动轮播,鼠标移出,继续自动轮播
- 节流阀,防止连续点击
知识储备
setAttribute('属性名','属性值')
给DOM元素添加自定义属性,案例中是给每个小圆圈添加自定义属性index,为了方便获取索引getAttribute('属性名')
获取属性元素.appendChild(元素)
追加节点setInterval(callback,time)
定时器,两个参数,第一个参数是回调函数,第二个参数是时间间隔,以毫秒
为单位clearInterval
取消定时器
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<script src="animate.js"></script> <!-- 缓动动画函数 -->
<script src="index.js"></script> <!-- js -->
</head>
<body>
<div class="box">
<ul>
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
<li><img src="images/5.jpg" alt=""></li>
<li><img src="images/6.jpg" alt=""></li>
</ul>
<span class="lt-btn btn"><</span>
<span class="rt-btn btn">></span>
<ol></ol>
</div>
</body>
</html>
css
.box{
width: 590px;
height: 470px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
ul{
width: 600%;
height: 100%;
list-style: none;
padding:0;
position: absolute;
}
ul>li{
float: left;
}
.btn{
width: 25px;
height: 35px;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
line-height: 35px;
color: #eeeeee;
font-size: 12px;
font-weight: bold;
background: rgba(0,0,0,.1);
cursor: pointer;
}
.btn:hover{
background: rgba(0,0,0,.3);
transition: all 1s;
}
.lt-btn{
border-radius: 0 25px 25px 0;
}
.rt-btn{
right: 0;
border-radius: 25px 0 0 25px ;
}
ol{
list-style: none;
padding: 0;
display: flex;
position: absolute;
left: 30px;
bottom: 30px;
margin: 0;
}
ol>li{
width: 9px;
height: 9px;
border-radius: 50%;
background: rgba(255,255,255,.7);
margin-right: 5px;
}
ol>.is-active{
background: #fff;
}
轮播图js
window.onload = function(){
// 获取元素
let box = $('.box');
let ul = $('ul');
let ol = $('ol');
let imgList = ul.querySelectorAll('img');
let ltBtn = $('.lt-btn');
let rtBtn = $('.rt-btn');
let flag = true; // 节流阀
let currentIndex = 0; // 轮播图索引,默认是0
// 遍历所有图片 动态生成小圆圈
for(let i = 0,len = imgList.length;i < len;i ++){
let li = document.createElement('li'); // 创建li节点
li.setAttribute('data-index',i); // 给每个li节点(小圆圈)添加自定义属性,为了更方便的获取index
ol.appendChild(li); // 将li(小圆圈)追加到ol里面
// 给每一个小圆点添加鼠标移入事件
li.addEventListener('mouseenter',function(){
// 节流阀 防止用户多次点击左右按钮或者小圆圈
if(flag){
flag = false;
currentIndex = this.getAttribute('data-index'); // 轮播图索引修改成当前被移入的小圆圈索引
change(); // 轮播图改变
}
});
}
let circleList = ol.querySelectorAll('li'); // 获取小圆圈列表
circleList[currentIndex].className = 'is-active'; // 当前轮播图所对应的小圆圈高亮显示
// 右侧按钮添加点击事件
rtBtn.addEventListener('click',function(){
if(flag){ // 节流阀
flag = false;
if(currentIndex == imgList.length - 1) // 如果当前图片为最后一张,将轮播图索引设置为0,即显示第一张轮播图
currentIndex = 0;
else
currentIndex ++; // 否则,自增1
change(); // 轮播图改变
}
})
// 左侧按钮添加点击事件
ltBtn.addEventListener('click',function(){
if(flag){ // 节流阀
flag = false;
if(currentIndex == 0) // 如果轮播图索引为0,则设置为最后一张
currentIndex = imgList.length - 1;
else
currentIndex --; // 否则,自减1
change(); // 轮播图改变
}
})
// 轮播图盒子添加鼠标移入事件,停止自动轮播 清除计时器
box.addEventListener('mouseenter',function(){
clearInterval(timer);
timer = null;
})
// 轮播图盒子添加鼠标移出事件,继续自动轮播
box.addEventListener('mouseleave',function(){
let timer = setInterval(function(){
rtBtn.click();
},3000)
})
// 轮播图改变
function change(){
flag = false;
// 遍历所有小圆圈,改为默认样式
for(let i = 0,len = circleList.length;i < len;i ++){
circleList[i].className = '';
}
// 当前显示轮播图对象小圆圈高亮
circleList[currentIndex].className = 'is-active';
// 缓动动画函数 animation(obj,target,callback)
animation(ul,- currentIndex * imgList[0].offsetWidth,function(){
flag = true;
});
}
// 自动轮播
let timer = setInterval(function(){
rtBtn.click();
},3000)
}
// 获取元素
function $(obj){
return document.querySelector(obj);
}
缓动动画js
function animation(obj,target,callback){
clearInterval(obj.timer);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.timer = setInterval(function(){
if(obj.offsetLeft == target){
clearInterval(obj.timer);
callback();
}
else
obj.style.left = obj.offsetLeft + step + 'px';
},30)
}