JavaScript 【03】jQuery做无缝轮播

作者: Qingelin | 来源:发表于2019-08-24 10:15 被阅读0次

JavaScript 【03】jQuery做无缝轮播
05_jQuery_无缝滚动轮播效果插件封装
jQuery实现无缝轮播
jquery实现无缝轮播
jQuery实现无缝轮播
JavaScript 【02】jQuery做轮播
Python（四十四）阶段小结
jquery简单实现无缝轮播
Vue轮播图的实现以及其与jQuery轮播图的简单对比
原生javascript实现无缝轮播

无缝轮播中每一个元素是独立的。
思路：挨着的元素分块，给一个块区的元素同时同一个方向的动画
每一张图片的状态有四种：在屏幕中current、离开leave、进入enter（包括站队stay）。
用js控制每一张图片图片的三种状态之间切换
总结规律：for循环，比如三张图的话

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

用正交 —— 内容、样式、行为分离，互不干扰
无缝轮播就是状态机，每一个元素有几种不同的状态，不同状态之间换来换去而已。
无缝轮播实例：

 <html>
<title>无缝轮播</title> 
<style>
  .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%);
    }
</styele>
<body>
    <div class="window">
        <div class="images">
            <img alt="图片" width=259 height=194 src="./images/1.jpg">
            <img alt="图片" width=259 height=300 src="./images/2.jpg">
            <img alt="图片" width=259 height=300 src="./images/3.jpg">
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
          let n
初始化()

setInterval(() => {
    makeLeave(getImage(n)) 
        .one('transitionend', (e) => { //transitionend就是指动画结束以后马上添加其它函数,`xxx(${n})`
            makeEnter($(e.currentTarget))   //给当前元素添加enter状态
        })
    makeCurrent(getImage(n + 1))
    n += 1
}, 2000)
//封装函数
function getImage(n) {
    return $(`.images > img:nth-child(${x(n)})`)
}

function x(n) {
    if (n > 3) {
        n = n % 3
        if (n === 0) {
            n = 3
            //n = 1,2,3
        }
    }
    return n
}
 
//初始化就是让n=1,让第一个变成current，其他的变成enter
function 初始化() {
    n = 1               
    //初始化三个图片
    $(`.images > img:nth-child(${n}`).addClass('current')
        .siblings().addClass('enter')
}

function makeCurrent($node) {
    return $node.removeClass("enter leave").addClass("current")
}

function makeEnter($node) {
    return $node.removeClass("current leave").addClass("enter")
}

function makeLeave($node) {
    $node.removeClass("enter current").addClass("leave")
    return $node //防止返回 undefined,操作一番，传入什么就传出什么
}

    </script>
</body>
</html>