jquery 上下滚动图片代码

蔺玄觞 2周前 11浏览 0评论

JQuery是一种JavaScript库，用于简化通用JavaScript任务的编写。其中，上下滚动图片功能在网站设计中很常见。下面是一个使用 JQuery 实现的上下滚动图片的代码示例：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      #wrapper {
        height: 300px;
        overflow: hidden;
        position: relative;
      }
      #scroller {
        position: absolute;
        top: 0;
        left: 0;
      }
      img {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div id="scroller">
        <img src="image1.jpg">
        <img src="image2.jpg">
        <img src="image3.jpg">
      </div>
    </div>
    <script>
      function startScroll() {
        $("#scroller").animate({top: "-=100px"}, 1000, function() {
          if ($("#scroller").css("top") == "-600px") {
            $("#scroller").css("top", "0px");
          }
          startScroll();
        });
      }
      startScroll();
    </script>
  </body>
</html>

这段代码主要分为 HTML、CSS 和 JavaScript 三个部分。首先，HTML 中的 #wrapper 和 #scroller 设定了滚动图片的外层和内层容器，其中 #wrapper 为父级容器设置了固定高度和 overflow:hidden 属性，而 #scroller 通过position:absolute;实现了在 #wrapper 中上下滚动。

接下来，通过 CSS 对图片尺寸和容器位置进行了设置。最后，通过 JavaScript 实现了滚动的主要逻辑：startScroll 函数定义了每次执行图片滚动的动画效果，动画时间为1秒，到达底部时将图片的位置重置为最顶部，再通过回调函数递归调用本身，不断执行图片滚动的功能。

上一篇 jQuery 上传文件 ajax

下一篇 python3。75编程

网站导航

网站导航

最近发表

文章归档

jquery 上下滚动图片代码