jQuery实现无缝轮播

最新推荐文章于 2023-06-05 19:20:20 发布

littlebirdflying

最新推荐文章于 2023-06-05 19:20:20 发布

阅读量703

点赞数

分类专栏： jQuery 文章标签： jQuery JavaScript 轮播

本文链接：https://blog.csdn.net/grapelove01/article/details/79743727

版权

jQuery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1 思路

1.1 思路

模仿多人跳绳，一个跳进去，再跳出来，第二个人跳进去，第一个人马上回来排队，除此类推。运用到轮播的方式：分为三种状态，展示状态currentImg、离开状态leavingImg、排队状态enterImg，图片状态顺序切换，形成循环。

1.2 效果图

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')
}