节流的使用。HTML5+CSS3+JS实现无缝轮播。

最新推荐文章于 2024-07-24 11:09:48 发布

Jacob的博客

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量896

点赞数 4

本文链接：https://blog.csdn.net/Jacob_vue/article/details/126650351

版权

节流的运用，实现无缝轮播

摘要由CSDN通过智能技术生成

什么节流？

节流就是n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。

实现无缝轮播的逻辑

HTML5层面首先需要有两层外部盒子包裹最里面的那层滚动层，比如：

<div>
    <ul>
        <li></li>
    </ul>
</div>

然后添加两个按钮，用做点击向左向右滑动

CSS3层面

最外层div设置溢出隐藏，重点：中间ul宽度设置为无限长或者远远大于使用宽度（如7000px）,
li通过浮动或flex布局使其并排显示，其余自由设置。

JS层面

克隆前面几个li（此处随意，如果让显示五张图滑动的话，就克隆前面四个li。总之想要n张图显示则克隆前面n-1个li）。定义两个变量，分别表示最后一张图片和当前图片，设置一个节流默认状态true。点击右按钮使ul向右滑动，点击时判断节流状态，true则继续执行，false则return，节流状态改为false，添加transition过渡然后向右移动xx像素，判断当前图片是否时最后一张，是则就瞬间变为第一张，这里需要注意去掉过渡是使用延时器，延时器时间为设置过渡时间的一半。延时过渡设置的时间把节流改为true点击左按钮与右按钮逻辑一样。注意一点，及当此时为第一张图片时，要瞬间移动到最后一张去掉过渡，使transform设为最后一张的位置，然后设置延时器延时时间为0，在延时器里瞬间加上过渡和动画。设置一个定时器，然后给最外层div加上鼠标事件，移入时清除定时器，移出时开启，无缝轮播就完成啦！

附上完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
   
            margin: 0;
            padding: 0;
        }
        .content_right{
   
            position: relative;
            width:1200px;
            height: 200px;
            overflow: hidden;
            margin: 0 auto;
            border: 1px solid #000;
        }
        .content_right ul{
   
            display: flex;
            align-items: center; 
            width:7000px;
            height: 200px;
        }
        .content_right ul li{
   
            display: flex;
            justify-content: center;
            align-items: center;
            width: 180px;
            height: 180px;
            margin-left: 50px;
            background-image: linear-gradient(to bottom right, #43aeff,#6c7dff, #a339ff);
            color: #ffffff;
        }
        .content_right ul li img{
   
            width: 60px;
            height: 60px;
        }


        .btn_left{
   
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 42px;
            text-align: center;
            margin: 60px 0 0 0px;
            color: #ffffff;
            background: #8f00b3;
            opacity: 0;
            border-radius: 50%;
            cursor: pointer;
            z-index: 111;
        }
        .btn_right{
   
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px;
            font-size: 42px;
            text-align: center;
            right: 0;
            margin: 60px 0px 0 0;
            color: #ffffff;
            background: #8f00b3;
            opacity: 0;
            border-radius: 50%;
            cursor: pointer;
            z-index: 111;
        }

        .content_right:hover .btn_left,.content_right:hover .btn_right{
   
            opacity: .6;
        }
    </style>
</head>
<body>
    <div class="content_right" id="root" >
        <div class="btn_left btn" id="left_btn" ><</div>
        <div class="btn_right btn" id="right_btn">></div>
        <ul ref="enterpriseList" id="list"