jQuery实例——无限循环滚动

最新推荐文章于 2024-06-28 17:11:23 发布

jwz934738949

最新推荐文章于 2024-06-28 17:11:23 发布

阅读量416

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108401464

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>无限循环滚动</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 600px;
      height: 161px;
      border: 1px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }

    ul {
      list-style: none;
      width: 1800px;
      height: 161px;
      background: #000;
    }

    ul > li {
      float: left;
    }

  </style>
  <script src="./js/jquery-3.5.1.js"></script>
  <script>
    $(function () {
      // 定义offset偏移量
      let offset = 0
      // 使图片开始进行滚动
      var timer

      function autoPlay() {
        timer = setInterval(function () {
          offset -= 10
          if (offset <= -1200) {
            offset = 0
          }
          $("ul").css("marginLeft", offset + "px");
        }, 100)
      }

      autoPlay()
      // 鼠标移入时停止动画，移出继续动画
      $("li").hover(function () {
        clearInterval(timer)
        // 为其他图片添加蒙版
        $(this).siblings().fadeTo(100, 0.3)
        // 清除当前图片的蒙版
        $(this).fadeTo(100, 1)
      }, function () {
        autoPlay()
        // 清除所有图片的蒙版
        $("li").fadeTo(100, 1)
      })
    })
  </script>
</head>
<body>
<div>
  <ul>
    <li><img src="images/scrollFirst.png" alt=""></li>
    <li><img src="images/scrollSecond.png" alt=""></li>
    <li><img src="images/scrollThird.png" alt=""></li>
    <li><img src="images/scrollForth.png" alt=""></li>
    <li><img src="images/scrollFirst.png" alt=""></li>
    <li><img src="images/scrollSecond.png" alt=""></li>
  </ul>
</div>
</body>
</html>

在这里插入图片描述

jwz934738949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery实例——无限循环滚动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无限循环滚动</title> <style> * { margin: 0; padding: 0; } div { width: 600px; height: 161px; border:
复制链接

扫一扫

专栏目录