js实现标准无缝滚动

最新推荐文章于 2023-09-11 17:26:17 发布

duenyang

最新推荐文章于 2023-09-11 17:26:17 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/duenyang/article/details/52397565

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝滚动</title>
    <style>
    #warp{
        width: 1200px;
        height: 300px;
        overflow: hidden;
        margin:100px auto 0;
    }
    #warp #con{
        width: 4000px;
        height: 300px;
        overflow: hidden;
    }
    #warp #con #box1{
         float: left;
         overflow: hidden;
    }
    #warp #con #box2{
         float: left;
         overflow: hidden;
    }
    #warp img{
        float: left;
        width: 200px;
        height: 300px;
    }
    </style>
</head>
<body>
    <div id="warp">
        <div id="con">
            <div id="box1">
                <img src="images/meinv1.jpg" alt="">
                <img src="images/meinv2.jpg" alt="">
                <img src="images/meinv3.jpg" alt="">
                <img src="images/meinv4.jpg" alt="">
                <img src="images/meinv5.jpg" alt="">
                <img src="images/meinv6.jpg" alt="">
            </div>
            <div id="box2"></div>
        </div>
    </div>
    <script>
        var warp=document.getElementById('warp');
        var con=document.getElementById('con');
        var box1=document.getElementById('box1');
        var box2=document.getElementById('box2');
        // box2.innerHTML=box1.innerHTML;
        var timer1=null,x=0;
        function scroll(){//滚动函数
        box2.innerHTML=box1.innerHTML;
        timer1=setInterval(function(){
            x++;
            if (x>=box1.clientWidth) {
                x=0;
                warp.scrollLeft=x;
            }
            warp.scrollLeft=x;
        },10)
        }
        scroll();
        warp.onmouseenter=function(){
            clearInterval(timer1);
        }
        warp.onmouseleave=function(){
            scroll();
        }
    </script>
</body>
</html>

这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度，使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动，具体的请大家参考代码。

duenyang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现标准无缝滚动

DOCTYPE html>html lang="en">head> meta charset="UTF-8"> title>无缝滚动title> style> #warp{ width: 1200px; height: 300px; overflow: hidden; margi
复制链接

扫一扫