JS实现无缝滚动

作者: sky丶星如雨 | 来源:发表于2017-06-28 20:40 被阅读39次

滚动轮播图原理:
以本文为例,想要实现视觉上的无缝隙滚动轮播,就需要在第四张图后,再添加第一张和第二张图,因为本文的案例是同时显示两张图片,如果只显示一张图,那么就在最后一张图后添加第一张图就可以了。
接下来,我们一起来看代码,其它解释会在代码注释里有所体现。

<!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;
        }

        ul {
            list-style-type: none;
        }

        /* 去除图片边距 */
        img {
            vertical-align: top;
        }

        .box {
            width: 600px;
            height: 200px;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }

        .box ul li {
            float: left;
        }
        /* 滚动的不是图片本身,而是包裹着图片的盒子 */
        .box ul {
            width: 400%;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box" id="scroll">
    <ul>
        <li>![](images/01.jpg)</li>
        <li>![](images/02.jpg)</li>
        <li>![](images/03.jpg)</li>
        <li>![](images/04.jpg)</li>
        <li>![](images/01.jpg)</li>
        <li>![](images/02.jpg)</li>
    </ul>
</div>
<script>
    var scroll = document.getElementById("scroll");
    var ul = scroll.children[0];
    var timer = null; // 定义定时器名字
    var count = 0; // 控制左偏移量
    timer = setInterval(autoPlay, 30); // 开启定时器
    function autoPlay() {
        count--;
        count <= -1200 ? count = 0 : count; // 当count小于-1200时,让count等于0,否则,继续--
        ul.style.left = count + "px";
    }
    scroll.onmouseover = function () { // 鼠标悬浮停止定时器
        clearInterval(timer);
    }
    scroll.onmouseout = function () {
        timer = setInterval(autoPlay, 30); // 鼠标离开开启定时器
    }
</script>
</body>
</html>

相关文章

  • 无缝向上、向左滚动--间歇性滚动

    无缝滚动原生JS 版 js 部分 无缝滚动 jquery 版 无缝向左滚动 js 部分 间歇性滚动 与 上面无缝滚...

  • JS实现无缝滚动

    首先上一张效果图 原理 在可视区域内,list1向上滚动,在滚动至图2的位置时,达到滚动连接临界点。由于list2...

  • JS实现无缝滚动

    滚动轮播图原理:以本文为例,想要实现视觉上的无缝隙滚动轮播,就需要在第四张图后,再添加第一张和第二张图,因为本文的...

  • js 无缝滚动实现

    前端经常看到图片滚动,理清楚原理就会很简单滚动的原理: 所有的图片用li展示出来,ul设置固定宽度,超出的部分hi...

  • JS实现无缝滚动

    不多说,直接贴代码了

  • js实现-新闻间歇性向上无缝滚动

    参考js实现-新闻间歇性向上无缝滚动 , 实现在vue中新闻列表的无限滚动, 代码如下 assets.html a...

  • JS实现图片的不间断连续滚动

    bug修复版2017.07.11 js替代marquee实现图片无缝滚动可能大家都碰到过,当marquee中滚动的...

  • JS实现文字无缝滚动

    html结构: style样式: JS代码:

  • js实现无缝滚动图

    先说说需求。要制作下图这种滚动视图。轮播图片的src包含在json数据中,对图片数量没有限制。图片的蒙版随着图片滚...

  • js实现循环无缝滚动

    原理一(scrollDiv滚动,浮动改变left值) 大的div(bigDiv)包含一个滚动的div(scroll...

网友评论

    本文标题:JS实现无缝滚动

    本文链接:https://www.haomeiwen.com/subject/hncpcxtx.html