轮播图案例

最新推荐文章于 2022-09-21 22:34:26 发布

Lekily

最新推荐文章于 2022-09-21 22:34:26 发布

阅读量116

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/y1506778504/article/details/118926766

版权

html css js

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

跑马灯轮播图

轮播图是我们经常会在页面开发中经常会用到的。
本案例就用js实现一个经典的无缝轮播图。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      position: relative;
        overflow: hidden;
      width: 1226px;
      height: 580px;
      margin: 75px auto;
    }
    #box #imgList{
      position: absolute;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
        transition: 0.7s ease;
    }
    #box #imgList img{
      position: relative;
      width: 100%;
      cursor: pointer;

    }
    #box .arrow a{
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        display: block;
        width: 40px;
        height: 70px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
        user-select: none;
        font-size: 30px;
        text-align: center;
        line-height: 70px;
    }
    #box .arrow .right{
        right: 0;
    }
  </style>
</head>
<body>
  <div id="box">
    <div id="imgList">
      <img src="https://s1.ax1x.com/2020/09/26/0irm1P.jpg" alt="" />
      <img src="https://s1.ax1x.com/2020/09/26/0irQ0g.jpg" alt="" />
      <img src="https://s1.ax1x.com/2020/09/26/0ir8ts.jpg" alt="" />
      <img src="https://s1.ax1x.com/2020/10/11/0gbKoV.jpg" alt="" />
      <img src="https://s1.ax1x.com/2020/10/11/0gb7Os.jpg" alt="" />
    </div>
      <div class="arrow">
          <a href="javascript:;" class="left">&lt;</a>
          <a href="javascript:;" class="right">&gt;</a>
      </div>
  </div>
  <script>
    let oBox =document.getElementById("box");
    let imgList = document.querySelector("#imgList");
    let leftBtn = document.querySelector(".left");
    let rightBtn = document.querySelector(".right");
    //克隆第一张图片放在最后面
    let cloneImg = imgList.firstElementChild.cloneNode();
    imgList.appendChild(cloneImg);

    let lock =true;//  设置函数节流锁
    let index = 0;//index表示当前显示到第几张
    let timer  //定义定时器
    rightBtn.onclick = function (){
        if(!lock)return;//  判断锁的状态  是关闭直接结束函数
        imgList.style.transition = "0.5s ease";
        index++;
        //当为第六张图片时立刻取消动画切换到第一张
        if(index==5){
            setTimeout(function (){
                imgList.style.transition='none';
                imgList.style.left=0;
                index=0;
            },500)
        }
        imgList.style.left = -index*1226+'px';
        fn()
    }
    leftBtn.onclick = function (){
        if(!lock)return;//  判断锁的状态  是关闭直接结束函数
        //当为第一张图片时立刻取消动画切换到第六张
        if(index==0){
            imgList.style.transition="none";
            imgList.style.left=-5*1226+"px";
            //切换完第六张后立马开启动画然后切换到第五张
            setTimeout(function (){
                imgList.style.transition = "0.5s ease";
                index=4;
                imgList.style.left=-index*1226+"px"
            },0)
        }else {
            index--;
            imgList.style.left = -index * 1226 + "px";
        }
        fn();
    }
    //播放函数
    function move(){
        timer = setInterval(function (){
            //clearInterval(timer);
            index++;
            imgList.style.transition = "0.5s ease";
            //当为第六张图片时立刻取消动画切换到第一张
            if(index==5){
                setTimeout(function (){
                    imgList.style.transition='none';
                    imgList.style.left=0;
                    index=0;
                },500)  //这里的时间要等于动画时间
            }
            imgList.style.left = -index*1226+'px';
        },3000);
    }
    //调用播放函数
    move();
    //点击共同事件
    function fn(){
        lock=false;
        //点击时立刻停止动画
        clearInterval(timer)
        //设置节流
        setTimeout(function (){
            lock=true;
        },500)
        //点击结束后立刻开始动画
        setTimeout(function (){
            move();
        },0)
    }
    //鼠标进入停止滚动
    imgList.onmouseenter = function (){
        clearInterval(timer)
    }

    //鼠标离开继续滚动
    imgList.onmouseleave =function (){
        move();
    }
  </script>
</body>
</html>

Lekily

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
轮播图案例

跑马灯轮播图轮播图是我们经常会在页面开发中经常会用到的。本案例就用js实现一个经典的无缝轮播图。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s
复制链接

扫一扫