轮播图

最新推荐文章于 2024-10-10 19:30:00 发布

Lif-e

最新推荐文章于 2024-10-10 19:30:00 发布

阅读量141

点赞数

分类专栏： html+css 文章标签： js css

本文链接：https://blog.csdn.net/name_fff/article/details/110945629

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    .box {
        width: 900px;
        height: 500px;
        margin: 100px auto;
        white-space: nowrap;
        overflow: hidden;
        font-size: 0;
    }
    .box .tu {
        display: inline-block;
        width: 900px;
    }
</style>
<body>
<div class="box">
    <img class="tu" src="img/1.jpg" alt="">
    <img class="tu" src="img/2.jpg" alt="">
    <img class="tu" src="img/3.jpg" alt="">
    <img class="tu" src="img/4.jpg" alt="">
    <img class="tu" src="img/1.jpg" alt="">
</div>
<script>
    let bt = document.querySelector(".box");
    let s;                                       //声明运动的定时器
    function start() {
        clearInterval(s);                       //当鼠标离开时先关闭一下定时器，以免出现混乱
        s = setInterval(() => {                   //持续运动
                bt.scrollLeft += 4
                if (bt.scrollLeft == 3600) {           //图片显示到最后一张的时候跳回第一张
                    bt.scrollLeft = 0;
                }
                //图片完整显示时，停顿4秒
                if(bt.scrollLeft==0||bt.scrollLeft==900||bt.scrollLeft==1800||bt.scrollLeft==2700||bt.scrollLeft==3600)
                {
                    stop();
                    setTimeout(()=>{
                        start();

                    },4000)
                }
                console.log(bt.scrollLeft);
            }
            , 1)
    }
    setTimeout(() => {
        start()
    }, 1)
    bt.onmouseover = stop;          //鼠标放上去调用停止事件
     bt.onmouseout = start;         //鼠标离开调用运动事件

    function stop() {
        clearInterval(s);           //关闭定时器
        loding();                   //判断需要停留的图片位置
    }
    function  loding(){
        if (bt.scrollLeft > 0 && bt.scrollLeft < 450) {
            clearInterval(s);
            bt.scrollLeft = 0;
        }
        if (bt.scrollLeft > 450 && bt.scrollLeft < 1350) {
            clearInterval(s);
            bt.scrollLeft = 900;
        }
        if (bt.scrollLeft > 1350 && bt.scrollLeft < 2250) {
            clearInterval(s);
            bt.scrollLeft = 1800;
        }
        if (bt.scrollLeft > 2250 && bt.scrollLeft < 3150) {
            clearInterval(s);
            bt.scrollLeft = 2700;

        }
    }


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