本着内容 样式 行为分离的原则来一手无缝轮播.
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<title>无缝轮播</title>
</head>
<body>
<div class="window">
<div class="images">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/7/18/164abd3d84d904c0~tplv-t2oaga2asx-image.image" alt="p1" width=300px id="img1">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/7/18/164abd3d849004bd~tplv-t2oaga2asx-image.image" alt="p2" width=300px id="img2">
<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2018/7/18/164abd3d84528469~tplv-t2oaga2asx-image.image" alt="p3" width=300px id="img3">
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
做这个无缝轮播的思路就像是跳大绳,大家排好队,一次上去一个人跳,跳完之后再跑到后面去排队. 这里为轮播设想了三个状态, 默认的 current 正在显示状态,显示完毕向左运动的 leave 状态,而后从左侧跑到队列中的 wait 状态.
*{
margin:0;
padding:0;
}
*{
box-sizing: border-box;
}
/* 隐藏其他图片 */
.window{
width: 300px;
height: 200px;
margin:20px auto;
overflow:hidden;
}
.images{
position:relative;
}
.images > img{
width:100%;
transition: all 2s;
position: absolute;
top: 0;
}
/* 当前图片要在最顶层,防止被覆盖 */
.images >img.current{
left: 0;
transform: translateX(0);
z-index: 1;
}
/* 离开状态,位于当前图片的左侧 */
.images >img.leave{
transform: translateX(-100%);
}
/* 等待状态位于当前图片的右侧 */
.images >img.wait{
transform: translateX(100%);
}
js的作用就是适时的更改元素的类来选择不同的样式.
//为图片设置当前状态
$('.images > img:nth-child(1)').addClass('current')
$('.images > img:nth-child(2)').addClass('enter')
$('.images > img:nth-child(3)').addClass('enter')
let n = 0;
setInterval(() =>{
$(`.images > img:nth-child(${n%3+1})`).removeClass('current').addClass('leave')
//不用one()的话只要有动画结束就会执行一次操作
.one('transitionend', (e) => {
$(e.currentTarget).removeClass('leave').addClass('enter')
})
$(`.images > img:nth-child(${(n%3+1)%3+1}`).removeClass('enter').addClass('current')
n +=1;
}, 4000)
