jQuery轮播图-阿里云开发者社区

jQuery轮播图

2024-10-12 9

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jQuery轮播图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .wrapper {
        width: 600px;
        height: 350px;
        border: 1px solid red;
        position: relative;
      }
    
      /* 5张图片叠加到一块 */
      .wrapper img {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        display: none;
      }
    
      .wrapper img:nth-of-type(1) {
        display: block;
      }
    
      /* 小圆点 */
      .btn {
        width: 150px;
        display: flex;
        justify-content: space-around;
        position: absolute;
        left: 225px;
        bottom: 10px;
        z-index: 100
      }
    
      .btn span {
        display: block;
        width: 15px;
        height: 15px;
        border: 3px solid white;
        border-radius: 50%;
      }
    
      /* 左右箭头 */
      .wrapper a {
        text-decoration: none;
        font-size: 50px;
        color: red;
        position: absolute;
        top: 35%;
      }
    
      .wrapper a:nth-of-type(1) {
        left: 10px;
    
      }
    
      .wrapper a:nth-of-type(2) {
        right: 10px;
      }
    
      .active {
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="contain">
        <img src="./imgs/1.png" alt="">
        <img src="./imgs/2.png" alt="">
        <img src="./imgs/3.png" alt="">
        <img src="./imgs/4.png" alt="">
        <img src="./imgs/5.png" alt="">
      </div>
      <div class="btn">
        <span class="active"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <a href="javascript:void(0);">&lt;</a>
      <a href="javascript:void(0);">&gt;</a>
    </div>
    <script src="js/jquery-3.6.0.js"></script>
    <script>
      var index=0;
      // 点击上一张
      $("a:first").click(function(){
        prev_pic();
      })
      // 点击下一张
      $("a:last").click(function(){
        next_pic();
      })
      // 悬浮停止
      $(".wrapper").mouseover(function(){
        clearInterval(id);
      });
      $(".wrapper").mouseout(function(){
          autoplay();
      })
      
      
      // 下一张
      function next_pic(){
        index++;
        if(index>4){
          index=0;
        }
        addStyle();
      }
      
      // 上一张
      function prev_pic(){
        index--;
        if(index<0){
          index=4;
        }
        addStyle();
      }
      
      // 控制图片显示隐藏,小圆点背景色
      function addStyle(){
        $("img").eq(index).fadeIn();
        $("img").eq(index).siblings().fadeOut();
        $("span").eq(index).addClass("active");
        $("span").eq(index).siblings().removeClass("active");
      }
      
      // 自动轮播
      var id;
      autoplay();
      function autoplay(){
        id=setInterval(function(){
          next_pic();
        },1000)
      }
      
    </script>
  </body>
</html>

jQuery轮播图

热门文章

最新文章

相关课程

相关电子书

相关实验场景