实现效果：
1、页面加载后，图片自动开始滚动播放
2、鼠标移入暂停，并放大显示，鼠标移出后继续滚动
实现思路：
1、首先设置一个外框，固定宽度，超出范围的图片隐藏掉
2、复制一遍图片列表，追加一组在当前图片列表后，即2倍长度3、 当第二组的第一张图片移动到第一张图片位置时，重置图片列表的位置
如下图所示
实现代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="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><divid="box"><ulid="list"><li><imgsrc="images/number/1.jpg"alt=""/></li><li><imgsrc="images/number/2.jpg"alt=""/></li><li><imgsrc="images/number/3.jpg"alt=""/></li><li><imgsrc="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，不传参，内部变量使用全局变量moveLeftfunctionmove(){
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>
本文转载自: https://blog.csdn.net/qq_40261601/article/details/129105536
版权归原作者 林二禾 所有， 如有侵权，请联系我们删除。
版权归原作者 林二禾 所有， 如有侵权，请联系我们删除。