js运动例子-无缝滚动

隐藏用户y

于 2022-11-12 00:09:30 发布

阅读量279

点赞数

分类专栏：前端入门文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_55355282/article/details/127813834

版权

前端入门专栏收录该内容

42 篇文章 0 订阅

订阅专栏

前言

感觉本文这个例子比较经典，很适合学习，作为一个新手应该反复学习，融会贯通，学以致用。

关于

滚动的是ul整体不是单张图片

假设3张图片，复制一倍，在第6张图片展现之后瞬间拉回第一张，无缝滚动只能一行显示

如果图片不一行展示换行的话，就不是无缝了

<!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;
        }
        #box{
            width: 790px;
            height: 420px;
            margin: 30px auto;
            position: relative;
            overflow: hidden;
        }
        #box ul{
            position: absolute;
            left: 0;
        }
        #box li{
            list-style: none;
            float: left;
        }
        #box div{
            height: 70px;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            position: absolute;
            bottom: 0;
            font-family: "微软雅黑";
            color: #fff;
        }
        #box div h3{
            line-height: 40px;
        }
    </style>
    <script src="../网页制作笔记/js/move.js"></script>
    <script>
        window.onload=function(){
            var ul=document.querySelector("ul");
            // var h3=document.querySelector("h3");
            // var p=document.querySelector("p");
            var div=document.querySelector("#box div");
            var n=0;  //用来存储图片走的个数
            var timer;
            var textArr=[
                {"title":'花开半夏',"content":'1'},
                {"title":'酒赏微醺',"content":'1'},
                {"title":'花开半夏',"content":'1'},
                {"title":'花开半夏',"content":'1'},
                {"title":'花开半夏',"content":'1'},
                {"title":'花开半夏',"content":'1'}
            ];
            // 把ul的内容复制一份
            ul.innerHTML+=ul.innerHTML;

            //所有的li排成一行
            var lis=document.querySelectorAll("li");

            //一个li的宽度？
            var w=parseInt(getComputedStyle(lis[0]).width);
            // console.log(w);
            // 
            ul.style.width=w*lis.length+'px';
            //把文字添加到图片上
            div.innerHTML='<h3>'+textArr[0].title+'</h3><p>'+textArr[0].content+'</p>';

            // 开启一个定时器，让图片一直走
            timer=setInterval(pic,3000);
            pic();
            function pic(){

                n++; //调一次函数就表示图片移动一张了，值+1

                //让文字先运动到下面
                move(div,{bottom:-70},500,'linear',function(){
                    //回调函数
                    // 当文字运动消失的时候运动ul
                    move(ul,{left:-790*n},1000,'linear',function(){
                        // 当图片停止了，需要去判断这张图是不是复制那个的第一张，如果是，把ul拉回来
                        if(n==lis.length/2){
                            // 当条件成立时说明现在是复制那个第一张已经走完，让ul回到0
                            ul.style.left=0;
                            n=0;//需要让n的值不再累加，让它与图片相对应
                        }

                        // 在文字上去之前把文字内容修改
                        div.innerHTML='<h3>'+textArr[n].title+'</h3><p>'+textArr[0].content+'</p>';
                        //当ul走完一个，文字归位
                        move(div,{bottom:0},500,'linear');
                    });
                });
            }
        }
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li><img src="img/1.jpg" alt=""></li>
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <!-- <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/5.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li> -->
        </ul>
    <div>
        <h3></h3>
        <p></p>  
    </div>
 </div>
</body>
</html>

本文引用的move.js我在GitHub上面找到了下载了压缩包引入的但是代码的内容并不是我想要的。不知道是我没有找对文件还是什么原因，后期找到会来更新

隐藏用户y

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js运动例子-无缝滚动

本文引用的move.js我在GitHub上面找到了下载了压缩包引入的但是代码的内容并不是我想要的。不知道是我没有找对文件还是什么原因，后期找到会来更新。假设3张图片，复制一倍，在第6张图片展现之后瞬间拉回第一张，无缝滚动只能一行显示。如果图片不一行展示换行的话，就不是无缝了。滚动的是ul整体不是单张图片。
复制链接

扫一扫