Js轮播

2019-06-13  本文已影响0人  如梦初醒Tel

简单轮播

思路
可以用marginLeft,可以用绝对定位相对定位,也可以用css3transform.css3transform性能最好,所以用css3transform.css3transform

简易版轮播

demo预览

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简易版轮播</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <style>
        .window{
            width: 300px;
            overflow: hidden;
        }
        .images{
            display: flex;
            align-items: flex-start;
            transition: transform 0.5s;
        }
        button{
            margin-right: 10px;
        }
    </style>

    <script src="../28-jQuery/jQuery3.3.1min.js"></script>
</head>
<body>
<div class="window">
    <div class="images" id="images">
        <img src="http://cms.neotv.com.cn/uploadfile/2014/0814/20140814040012806.jpg" alt="" width="300px" height="200px">
        <img src="http://pic3.16pic.com/00/55/42/16pic_5542988_b.jpg" alt="" width="300px" height="200px">
        <img src="http://gss0.baidu.com/-fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/f11f3a292df5e0fe17afb8855a6034a85fdf72fa.jpg" alt="" width="300px" height="200px">
    </div>
</div>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
</body>
<script>
    $('#btn1').on('click',function () {
        $('#images').css({
            transform:'translateX(0)'
        })
    })
    $('#btn2').on('click',function () {
        $('#images').css({
            transform:'translateX(-300px)'
        })
    })
    $('#btn3').on('click',function () {
        $('#images').css({
            transform:'translateX(-600px)'
        })
    })
</script>

</html>

升级版轮播

代码预览
效果预览

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>升级版轮播</title>
    <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>
  <style>
    .images {
      display: flex;
      align-items: flex-start;
      transition: all 0.5s;
    }

    .window {
      width: 300px;
      overflow: hidden;
      margin: auto;
    }

    .buttons {
      width: 300px;
      margin: 40px auto;
      text-align: center;
    }

    .red {
      color: red;
    }
  </style>
  <body>
    <div class="window">
      <div id="images" class="images">
        <img src="images/1.jpg" height="300" width="300" />
        <img src="images/2.png" height="300" width="300" />
        <img src="images/3.png" height="300" width="300" />
        <img src="images/4.jpg" height="300" width="300" />
      </div>
    </div>
    <div class="buttons">
      <span>按钮1</span>
      <span>按钮2</span>
      <span>按钮3</span>
      <span>按钮4</span>
    </div>
  </body>
  <script>
    var allButtons = $(".buttons > span");

    for (let i = 0; i < allButtons.length; i++) {
      $(allButtons[i]).on("click", function(x) {
        //注意,allButtons[i]是dom对象,不是jquery对象,所以要用jquery的方法,就要在前面加上$,把他转化一下,里面就有方法了.
        var index = $(x.currentTarget).index(); //x.currentTarget就是当前点的对象.想要获取他在自己把把中的次序,用jquery中的index()比较简单
        var p = index * -300;
        $("#images").css({
          transform: "translate(" + p + "px)"
        });

        n = index; //这一步很关键,吧index赋给n,然后n就变成了当前点击的按钮的标号,其余的n都变了,也会从这里继续往下自动滚动,所以要用全局的.
        activeButton(allButtons.eq(n));
      });
    }

    var n = 0;
    var size = allButtons.length;
    allButtons
      .eq(n % size) // eq找出对应第几个的dom,并把dom封装成jquery对象
      .trigger("click") //trigger('xxx')触发一次xxxx事件
      .addClass("red")
      .siblings(".red")
      .removeClass("red");

    var timerId = setTimer();

    function setTimer() {
      return setInterval(() => {
        n += 1;
        allButtons
          .eq(n % size)
          .trigger("click")
          .addClass("red")
          .siblings()
          .removeClass("red");
      }, 1000);
    }

    function activeButton($button) {
      $button
        .addClass("red")
        .siblings(".red")
        .removeClass("red");
      //siblings()接受的是选择器,返回所有符合选择器的兄弟
      //jquery的链式操作.每次找到一个对象,下面的函数都是操作的这个新找到的对象
      //整个链式操作翻译:首先找到对应的第几个dom,然后用eq把他封装成jquery对象,,再用trigger('xxx')触发他的点击事件,在给他加上red的class,然后找到他符合 .red 的兄弟姐妹,然后在操作这些个兄弟姐妹
    }

    $(".window").on("mouseenter", function() {
      window.clearInterval(timerId);
    });
    $(".window").on("mouseleave", function() {
      timerId = setTimer(); //这里不能重新写var timer,不然就相当于重新在这4里声明了新变量,上面的clean没办法清除这里了
    });
  </script>
</html>

无缝轮播

什么是无缝轮播,总的来说就好像是跳绳一样.在一端排队等候的有1、2、3、4、5个小朋友，在跳绳的时候就是一个窗口，1 进入到绳子里面，就是展示当前的小朋友，1准备离开后，2开始进入，此时，1就要排在5的后面。当2离开的时候，3进入，此时2排在1的后面。循坏，轮播的效果就是这样。
预览链接

html

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <title>无缝的轮播</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="window">
    <div class="images">
        <!--img[src="./images/$.png"][alt="图片$"][width=400][height=300]*5-->
        <img src="./images/1.png" alt="图片1" width="400" height="300">
        <img src="./images/2.png" alt="图片2" width="400" height="300">
        <img src="./images/3.png" alt="图片3" width="400" height="300">
        <img src="./images/4.png" alt="图片4" width="400" height="300">
        <img src="./images/5.png" alt="图片5" width="400"  height="300">
    </div>
</div>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

css

* {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%;
    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

let n = 1;
init();
setInterval(() => {
    makeLeave(getImage(n)).one('transitionend', (e) => {
        //动画结束后的事件
        makeEnter($(e.currentTarget))
    });
    makeCurrent(getImage(n + 1));
    n += 1;
}, 3000)

function getImage(n) {
    return $(`.images > img:nth-child(${x(n)})`)
}

function x(n) {
    len = $(`.images > img`).length;
    if (n > len) {
        n = n % len;
        if (n === 0) {
            n = len
        }
    } //1,2,3
    return n
}

function init() {
    n = 1;
    $(`.images > img:nth-child(${n})`).addClass('current')
        .siblings().addClass('enter')
}

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

function makeLeave($node) {
    return $node.removeClass('current enter').addClass('leave');
}

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

在这里面还是有个bug就是切换浏览器标签的时候，在切回去就会容易发生间歇性工作的情况。解决方法查看下一篇博文。

上一篇 下一篇

猜你喜欢

热点阅读