无缝连续滚动特效

最新推荐文章于 2024-09-07 17:25:18 发布

Lekily

最新推荐文章于 2024-09-07 17:25:18 发布

阅读量109

点赞数

分类专栏： js 文章标签： html css javascript

本文链接：https://blog.csdn.net/y1506778504/article/details/118913503

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了如何使用JavaScript和CSS创建一个无缝连续滚动的图片特效。通过设置定时器和CSS的`transform`属性，实现在鼠标离开时自动平滑滚动图片，而鼠标悬停时暂停滚动的功能。代码示例中包含了HTML、CSS和JavaScript的完整实现。

摘要由CSDN通过智能技术生成

Js实现无缝连续滚动特效
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #box{
      width: 850px;
      border: 4px solid #000;
      margin: 50px auto;
      overflow: hidden;
    }
    #box #imglist{
      position: relative;
      display: flex;
      width: 2000px;
    }
    #box ul{
      list-style: none;
    }
  </style>
</head>
<body>
  <div id="box">
    <ul id="imgList">
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g5pVO.th.png" alt="" />
      </li>
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g5FGd.th.png" alt="" />
      </li>
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g5udS.th.png" alt="" />
      </li>
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g5YLV.th.png" alt="" />
      </li>
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g5aoF.th.png" alt="" />
      </li>
      <li>
        <img src="https://s1.ax1x.com/2020/10/11/0g50JJ.th.png" alt="" />
      </li>
    </ul>
  </div>
  <script>
    let oBox = document.getElementById("box");
    let imgList = document.getElementById("imgList");
    //复制多一遍所有的li
    imgList.innerHTML+=imgList.innerHTML;
    //设置定时器
    let timer;
    //设置ul的水平移动距离
    let left = 0;
    move()
    function move(){
      //设表先关
      clearInterval(timer);
      timer=setInterval(function (){
        left-=4;
        if(left<-960){
          left=0;
        }
        imgList.style.transform = `translateX(${left}px)`
      },20);
    }

    //鼠标进入时暂停定时器
    oBox.onmouseenters = function (){
      clearInterval(timer)
    };
    //鼠标移开后继续
    oBox.onmouseleave = function (){
      move()
    }
  </script>
</body>
</html>

Lekily

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
无缝连续滚动特效

Js实现无缝连续滚动特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box{ width: 850px; border: 4px so
复制链接

扫一扫

专栏目录