JS之图片无缝滚动

最新推荐文章于 2022-11-05 16:33:29 发布

光芒万丈母娘

最新推荐文章于 2022-11-05 16:33:29 发布

阅读量209

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/weixin_40322503/article/details/80057314

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

无缝滚动的图片是非常常见的一道面试题~

代码很简单，但思路一定要清晰。

首先是准备的几张图片：

因为图片个数有限，移动的过程中难免会移完，所以我们需要先将这几张图片拷贝一份附到后面。

但是再多的图片也有走完的一天，我们需要弄一个循环图片，所以在ul移动一半的时候自动将left赋为0，实现循环假象。

最后一步就是让我们的div可以隐藏溢出。

总代码是：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 0;
        }
        div {
            width: 400px;
            height: 100px;
            margin: 100px auto;
            position: relative;
            background: red;
            /*overflow: hidden;*/
        }
        div ul {
            position: absolute;
            left: 0;
            top: 0;
        }
        div ul li {
            display: inline-block;
            width: 100px;
            height: 100px;
            list-style: none; 
        }
        div ul li img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524501041501&di=efb9758248e5f8d5c664bbc3bacd0124&imgtype=0&src=http%3A%2F%2Fp4.gexing.com%2FG1%2FM00%2FD9%2F5A%2FrBACFFUA8-iBzVMQAAAHOCnUka0358_200x200_3.jpg%3Frecache%3D20131108" alt="1"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524501047758&di=a3bf020a240d99a32a7cc7914e0456d9&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D2092056962%2C2879541923%26fm%3D214%26gp%3D0.jpg" alt="2"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524501041505&di=ef78790a20aa0f36644c5b65b20698c4&imgtype=0&src=http%3A%2F%2Fimg3.duitang.com%2Fuploads%2Fitem%2F201410%2F04%2F20141004080811_svNKJ.jpeg" alt="3"></li>
            <li><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1524501081239&di=969266a3de6e46f99ee676955af0cfb2&imgtype=jpg&src=http%3A%2F%2Fimg2.imgtn.bdimg.com%2Fit%2Fu%3D4253331612%2C1453375223%26fm%3D214%26gp%3D0.jpg" alt="4"></li>
        </ul>
    </div>
    <script>
        window.onload = function(){
            var oDiv = document.getElementsByTagName("div")[0];
            var oUl = document.getElementsByTagName("ul")[0];
            var aLi = oUl.getElementsByTagName('li');
            oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
            oUl.style.width = aLi[0].offsetWidth*aLi.length+'px';
            setInterval(function(){
                if(oUl.offsetLeft<=-oUl.offsetWidth/2){
                    oUl.style.left = '0';
                }
                oUl.style.left = oUl.offsetLeft - 10+'px';
            },30)
        }
    </script>
</body>
</html>