js实现图片连续滚动播放

最新推荐文章于 2024-04-15 13:49:29 发布

林二禾

最新推荐文章于 2024-04-15 13:49:29 发布

阅读量3.3k

点赞数 6

分类专栏： Javascript实现网站常见动画文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_40261601/article/details/129105536

版权

Javascript实现网站常见动画专栏收录该内容

7 篇文章 1 订阅

订阅专栏

实现效果：

1、页面加载后，图片自动开始滚动播放

2、鼠标移入暂停，并放大显示，鼠标移出后继续滚动

在这里插入图片描述

实现思路：

1、首先设置一个外框，固定宽度，超出范围的图片隐藏掉
2、复制一遍图片列表，追加一组在当前图片列表后，即2倍长度

3、当第二组的第一张图片移动到第一张图片位置时，重置图片列表的位置

如下图所示
在这里插入图片描述

实现代码：

<!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>无缝连续滚动</title>
    <style>
        
        #box {
            width: 1030px;   /* 设置父元素盒子总宽度=每张图片宽度+图片中间的边距margin之和 */
            margin: 50px auto;  /* 设置父元素距顶部50px，居中，便于显示 */
            overflow: hidden;  /* 设置超出的图片内容隐藏 */
            
        }
        #box ul {
            list-style: none;   /* 取消ul的默认圆点样式 */
            width: 5000px;    /* ul宽度设置大一点，超过图片+边距总长度的两倍 */
            position: relative;   /* 设置相对定位，便于使用left控制图片列表的位置，不断左移 */
        }
        #box ul li {
            float: left;    /* 设置每一项靠左在一行显示 */
            margin-right: 10px;  /* 设置右边距 */
        }
        #list img{
            width: 250px;  /* 设置图片统一宽度 */
        }
        /* 当鼠标悬浮在图片上时 */
        #list img:hover{
            cursor: pointer;  /* 鼠标变为手势 */
            scale: 1.3;  /* 图片放大为1.3倍 */
        }


    </style>
</head>
<body>
    <div id="box">
        <ul id="list">
            <li><img src="images/number/1.jpg" alt="" /></li>
            <li><img src="images/number/2.jpg" alt="" /></li>
            <li><img src="images/number/3.jpg" alt="" /></li>
            <li><img src="images/number/4.jpg" alt="" /></li>
        </ul>
    </div>
    <script>
        // 在当前列表后追加复制一份，使列表长度变为当前2倍
        // 获取list列表
        var olist = document.getElementById("list");  
        // 获取li数组
        var liArr = document.querySelectorAll('#list>li');
        // 新建一个变量接收新节点
        var newLiNode = null;
        // 遍历li数组，依次复制li，并挂载到父节点上
        for(var i = 0; i<liArr.length;i++){
            // 复制节点
            newLiNode = liArr[i].cloneNode(true);
            // 挂载在父节点上
            olist.appendChild(newLiNode);
        }

        // 定义一个全局变量的定时器
        var timer = null;
        // 定义一个全局变量的left值
        var moveLeft = 0;

        // 声明滚动函数move，不传参，内部变量使用全局变量moveLeft
        function move(){
            timer = setInterval(function(){
                // 当跑完一轮时，重置位置
                if(moveLeft === -1040){
                    moveLeft = 0;
                }
                moveLeft -= 5;
                // 设置列表每20毫秒左移5px
                olist.style.left = moveLeft+"px";
            },20)
        }
        
        // 加载页面时调用该滚动函数
        move();
       
        // 鼠标移入清清除定时器
        olist.onmouseenter = function(){
            clearInterval(timer);
        }; 
        // 鼠标移出，调用move重新开启定时器
        olist.onmouseleave = function(){
            move();
        }

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