无缝轮播

作者: CeaCrab | 来源:发表于2018-03-26 00:02 被阅读0次

无缝细解过程

html

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无 缝 轮 播</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <script src="./jquery-3.3.1.min.js"></script>
    <script src="./main.js"></script>
    <div class="window">
        <div class="images">
               <img src="https://img.alicdn.com/imgextra/i4/1857895969/TB2einWX2iSBuNkSnhJXXbDcpXa_!!1857895969.jpg" width="400">
      <img src="https://img.alicdn.com/bao/uploaded/i4/1857895969/TB2SwwNaPQnBKNjSZSgXXXHGXXa_!!1857895969.jpg" width="400">
      <img src="https://img.alicdn.com/bao/uploaded/i4/1857895969/TB11uPebStYBeNjSspaXXaOOFXa_!!0-item_pic.jpg" width="400">
        </div>
    </div>
</body>
</html>
</body>
</html>

css

*{margin:0; padding: 0;}
*{box-sizing: border-box;}
.window{
    width: 400px;
    height: 400px;
    margin: 20px auto;
    /*overflow: hidden;*/
}
.images{
    position: relative;
    
    }
.images > img{
    width: 100%; 
    transition: all 0.3s;
}
.images > img:nth-child(1){
    position: absolute;
    top: 0;
    left: 0;
}
.images > img:nth-child(2){
    position: absolute;
    top: 0;
    left: 100%;
}
.images > img:nth-child(3){
    position: absolute;
    top: 0;
    left: 100%;
}
.images > img.rigth{
    position: absolute;
    top: 0;
    left: 100%;
}

// 这样有个bug，3跟1一起动画的时候，由于我们监听过1每次动画完都会添加一个right类，处理bug的方法很简单，改成临时监听，.on改成，one
setTimeout(function(){
    // 1-2一起做动画
    $('.images > img:nth-child(1)').css({
    transform: 'translateX(-100%)'
    })
    $('.images > img:nth-child(2)').css({
    transform: 'translateX(-100%)'
    })
    // 1播放完回到右边
    $('.images > img:nth-child(1)').one('transitionend',function(e){
        $(e.currentTarget).addClass('rigth').css({
            transform: 'none'
        })
    })

},2000)


setTimeout(function(){
    // 2-3一起做动画
    $('.images > img:nth-child(2)').css({
    transform: 'translateX(-200%)'
    })
    $('.images > img:nth-child(3)').css({
    transform: 'translateX(-100%)'
    })
    // 2播放完回到右边
    $('.images > img:nth-child(2)').one('transitionend',function(e){
        $(e.currentTarget).addClass('rigth').css({
            transform: 'none'
        })
    })

},4000)

setTimeout(function(){
    // 3-1一起做动画
    $('.images > img:nth-child(3)').css({
    transform: 'translateX(-200%)'
    })
    $('.images > img:nth-child(1)').css({
    transform: 'translateX(-100%)'
    })
    // 3播放完回到右边
    $('.images > img:nth-child(3)').one('transitionend',function(e){
        $(e.currentTarget).addClass('rigth').css({
            transform: 'none'
        })
    })

},6000)

无缝轮播js切换动画

css代码

*{margin:0; padding: 0;}
*{box-sizing: border-box;}
.window{
    width: 400px;
    height: 400px;
    margin: 20px auto;
    overflow: hidden;
}
.images{
    position: relative;
    
    }
.images > img{
    width: 100%; 
    transition: all 0.3s;
    position: absolute; 
    top: 0;
}

.images > img.current{
    left: 0;
    transform: translateX(0);
    z-index: 1;
}
.images > img.leave{
    transform: translateX(-100%);
    z-index: 1;
}
.images > img.enter{ 
    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')
setTimeout(() => {
    $('.images > img:nth-child(1)').removeClass('current').addClass('leave')
        .one('transitionend',(e) => {
            $(e.currentTarget).removeClass('leave').addClass('enter')
        })
    $('.images > img:nth-child(2)').removeClass('enter').addClass('current')
},2000)

setTimeout(() => {
    $('.images > img:nth-child(2)').removeClass('current').addClass('leave')
        .one('transitionend',(e) => {
            $(e.currentTarget).removeClass('leave').addClass('enter')
        })
    $('.images > img:nth-child(3)').removeClass('enter').addClass('current')
},4000)

setTimeout(() => {
    $('.images > img:nth-child(3)').removeClass('current').addClass('leave')
        .one('transitionend',(e) => {
            $(e.currentTarget).removeClass('leave').addClass('enter')
        })
    $('.images > img:nth-child(1)').removeClass('enter').addClass('current')
},6000)

setTimeout(() => {
    $('.images > img:nth-child(1)').removeClass('current').addClass('leave')
        .one('transitionend',(e) => {
            $(e.currentTarget).removeClass('leave').addClass('enter')
        })
    $('.images > img:nth-child(2)').removeClass('enter').addClass('current')
},9000)

循环无缝轮播

CSS

*{margin:0; padding: 0;}
*{box-sizing: border-box;}
.window{
    width: 400px;
    height: 400px;
    margin: 20px auto;
    overflow: hidden;
}
.images{
    position: relative;
    
    }
.images > img{
    width: 100%; 
    transition: all 0.3s;
    position: absolute; 
    top: 0;
}

.images > img.current{
    left: 0;
    transform: translateX(0);
    z-index: 1;
}
.images > img.leave{
    transform: translateX(-100%);
    z-index: 1;
}
.images > img.enter{ 
    transform: translateX(100%);
}

js
1.首先初始化三张图片的状态初始化n 闹钟方式改为一直循环
2.因为$('.images…')是字符串，在选择第几张图片的时候，直接使用(n)是字符串'n'，需要使用ES6语法字符串引号''要换成``符号，(n)换成(${n}),这样n才不是字符串而是数字。
3.一共有3张图片，所以n不能大于3，可以做下判断，当n大于3的时候，让n等于(n=n%3)，n除3也就是余1，n等于第一张，当n等于6的时候 n%3余0，所以需要判断n为6除3余0时，让n等于3，这样就把n就满足一直是(1,2,3)了。
4.一共3张图片，当n等于3，n+1就等于4了，可以用函数来限制，(${x(n)})，(${x(n+1)})，这样不管是x(n)还是x(n+1)都限制在了n只能等于1,2,3了。

$('.images > img:nth-child(1)').addClass('current')
$('.images > img:nth-child(2)').addClass('enter')
$('.images > img:nth-child(3)').addClass('enter')
let n = 1 //初始化变量n，从第一张开始
setInterval(() => {
    $(`.images > img:nth-child(${x(n)})`).removeClass('current').addClass('leave')
        .one('transitionend',(e) => {
            $(e.currentTarget).removeClass('leave').addClass('enter')
        })
    $(`.images > img:nth-child(${x(n+1)})`).removeClass('enter').addClass('current')
    n += 1
},2000)

function x(n){
    if(n > 3){
        n = n%3
        if(n === 0){
            n = 3
        }
    }
    return n
} //n只能等于1，2,3

代码优化

1. 声明变量n，初始化图片状态包括n
2. 3秒之后循环开始，第n个图片走，动画走完添加enter状态，下一张图片切换current状态。再过3秒，n +=1即n++(第二张图片)，开始下一轮…

// 清晰步骤
let n 
inrize()
setInterval(() => {
    leaveActive(indexImg(n)) //leaveActive这个函数返回值是undefined，
        .one('transitionend',(e) => { // undefined后边接事件肯定不行，可以让leaveActive把这个节点当做返回值返回
            enterActive($(e.currentTarget))
        })
    currentActive(indexImg(n+1))
    n += 1
},2000)
---------------------------------------------------------------------------------------------------------------------
//封装函数
// 限制n/n+1在1,2,3,范围内
function x(n){  
    if(n > 3){
        n = n%3
        if(n === 0){
            n = 3
        }
    }
    return n
} //n只能等于1，2,3

//初始化
function inrize(){
    n = 1
    $(`.images > img:nth-child(${n})`).addClass('current')
    .siblings().addClass('enter') //第一个current状态，其他所有兄弟全部在enter状态
    
}
//current状态
function currentActive($node){
    $node.removeClass('enter leave').addClass('current')
}
//leave状态
function leaveActive($node){
    $node.removeClass('current enter').addClass('leave')
    return $node //返回节点 这样返回值就不是undefined了.或则直接return $node.removeClass('current enter').addClass('leave')
}
//enter状态
function enterActive($node){
    $node.removeClass('current leave').addClass('enter')
}
//选择器优化
function indexImg(n){
    return $(`.images > img:nth-child(${x(n)})`)
}
---------------------------------------------------------------------------------------------------------------------
//详解步骤
let n 
inrize()
setInterval(() => {
    // $(`.images > img:nth-child(${x(n)})`).removeClass('current').addClass('leave')
    leaveActive(indexImg(n)) //leaveActive这个函数返回值是undefined，
        .one('transitionend',(e) => { // undefined后边接事件肯定不行，可以让leaveActive把这个节点当做返回值返回
            // $(e.currentTarget).removeClass('leave').addClass('enter')
            enterActive($(e.currentTarget))
        })
    // $(`.images > img:nth-child(${x(n+1)})`).removeClass('enter').addClass('current')
    currentActive(indexImg(n+1))
    n += 1
},2000)

无缝轮播

无缝细解过程

无缝轮播js切换动画

循环无缝轮播

代码优化

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读