当前位置: 萬仟网 > IT编程>开发语言>Jquery > jQuery---京东轮播图

jQuery---京东轮播图

2020年01月18日 14:58  | 萬仟网IT编程  | 我要评论

京东轮播图

有个计数的,点右边,计数增加,判断计数是否超过总的长度,超过设置计数为0,再设置当前的图片动画,兄弟的图片动画

左边点击同理,计数是--,判断计数是否等于-1,等于则reset计数为总长度,在设置当前的图片动画,兄弟的图片动画

 

<!doctype html>
<html lang="zh-cn">

<head>
  <meta charset="utf-8">
  <title>京东商城</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .slider {
      height: 340px;
      width: 790px;
      margin: 100px auto;
      position: relative;
    }

    .slider li {
      position: absolute;
      display: none;
    }

    .slider li:first-child {
      display: block;
    }


    .arrow {
      display: none;
    }

    .slider:hover .arrow {
      display: block;
    }

    .arrow-left,
    .arrow-right {
      font-family: "simsun", "宋体";
      width: 30px;
      height: 60px;
      background-color: rgba(0, 0, 0, 0.1);
      position: absolute;
      top: 50%;
      margin-top: -30px;
      cursor: pointer;
      text-align: center;
      line-height: 60px;
      color: #fff;
      font-weight: 700;
      font-size: 30px;
    }

    .arrow-left:hover,
    .arrow-right:hover {
      background-color: rgba(0, 0, 0, .5);
    }

    .arrow-left {
      left: 0;
    }

    .arrow-right {
      right: 0;
    }
  </style>
</head>

<body>
  <div class="slider">
    <ul>
      <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/7.jpg" alt=""></a></li>
      <li><a href="#"><img src="images/8.jpg" alt=""></a></li>
    </ul>
    <!--箭头-->
    <div class="arrow">
      <span class="arrow-left">&lt;</span>
      <span class="arrow-right">&gt;</span>
    </div>
  </div>


  <script src="jquery-1.12.4.js"></script>
  <script>

    $(function () {
      var count = 0;
      $(".arrow-right").click(function () {
        count++;
        if (count == $(".slider li").length) {
          count = 0;
        }
        console.log(count);
        //让count渐渐的显示,其他兄弟渐渐的隐藏
        $(".slider li").eq(count).fadein().siblings().fadeout();
      });

      $(".arrow-left").click(function () {
        count--;
        if (count == -1) {
          count = $(".slider li").length - 1;
        }
        console.log(count);
        $(".slider li").eq(count).fadein().siblings().fadeout();
      });
    });

  </script>

</body>

</html>

 

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

◎已有 0 人评论

Copyright © 2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com