1 思路
1.1 思路
模仿多人跳绳，一个跳进去，再跳出来，第二个人跳进去，第一个人马上回来排队，除此类推。运用到轮播的方式：分为三种状态，展示状态currentImg、离开状态leavingImg、排队状态enterImg，图片状态顺序切换，形成循环。
1.2 效果图
no-cap-slide.gif
2. html和css布局
<!doctype html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>无缝的轮播</title>
<style>
* {margin: 0;padding: 0;}
* {box-sizing: border-box;}
.window {width: 400px;height: 300px;margin: 20px auto;overflow: hidden;}
.images {position: relative;}
.images > img {width: 100%;position: absolute;top: 0;transition: all 1500ms;} /*注意img为absolute*/
.images > img.current {left: 0;transform: translateX(0);z-index: 1;} /*设置z-index达到视觉效果*/
.images > img.leave {transform: translateX(-100%);z-index: 1;}
.images > img.enter {transform: translateX(100%);}
</style>
</head>
<body>
<div class="window">
<div class="images">
<img src="./images/1.png" alt="图片" width="400" height="300" >
<img src="./images/2.png" alt="图片" width="400" height="300">
<img src="./images/3.png" alt="图片" width="400" height="300">
<img src="./images/4.png" alt="图片" width="400" height="300">
<img src="./images/5.png" alt="图片" width="400" height="300">
</div>
</div>
<script src="jquery-3.3.1.min.js"></script>
</body>
</html>
3. js代码
3.1 原始代码
$('.images > img:nth-child(1)').addClass('current') // 初始化，第一张图片添加current类
$('.images > img:nth-child(2)').addClass('enter') // 后面图片添加enter类
$('.images > img:nth-child(3)').addClass('enter')
$('.images > img:nth-child(4)').addClass('enter')
$('.images > img:nth-child(5)').addClass('enter')
let n = 1
setInterval(()=>{
let currentImg = $(`.images > img:nth-child(${x(n)})`) // 获得正在显示的img元素
let nextImg = $(`.images > img:nth-child(${x(n + 1)}`) // 获得准备进入的img元素
currentImg.removeClass('current').addClass('leave') // 3s后，显示图片离开
.one('transitionend', (e)=>{ // 过渡动画结束时，此时图片类为leave，改变图片的类为enter
$(e.currentTarget).removeClass('leave').addClass('enter')
})
nextImg.removeClass('enter').addClass('current') // 下一张图片进入
n++
},3000)
// 以下为封装函数
function x(n) { // 保证n在1-5循环
if (n > 5) {
n = n % 5
if (n === 0) { // 3的倍数设置为3，对应第3张图
n = 5
}
}
return n
}
3.2 优化后
let n
init() // 初始化，第一张图片current显示，其余图片enter排队
setInterval(()=>{
makeLeave( getImage(n)) // 通过改变类，让current图片离开，变为leave状态
.one('transitionend', (e)=>{ // 达到leave状态那一刻，马上向enter状态过渡
makeEnter($(e.currentTarget))
})
makeCurrent(getImage(n+1)) // 让下一张图片显示
n++
},3000)
function init() {
n = 1
$(`.images > img:nth-child(${x(n)})`).addClass('current')
.siblings().addClass('enter')
}
function x(n) {
if (n > 5) {
n = n % 5
if (n === 0) { // 3的倍数设置为3，对应第3张图
n = 5
}
}
return n
}
function getImage(n) {
return $(`.images > img:nth-child(${x(n)})`)
}
function makeCurrent($node){
return $node.removeClass('enter leave').addClass('current')
}
function makeLeave($node){
return $node.removeClass('enter current').addClass('leave')
}
function makeEnter($node){
return $node.removeClass('leave current').addClass('enter')
}
4. 总结
4.1 思路
css负责提供所有的状态，js负责切换状态。
4.2 jQuery相关api
- $()
- removeClass()
- addClass()
- siblings()
- one('transitionend',fn)
5 参考衔接
饥人谷jQuery相关课程https://xiedaimala.com/
网友评论