jQuery---京東輪播圖_ZenDei技術網路在線

jQuery---京東輪播圖

-Advertisement-

京東輪播圖有個計數的，點右邊，計數增加，判斷計數是否超過總的長度，超過設置計數為0，再設置當前的圖片動畫，兄弟的圖片動畫左邊點擊同理，計數是--，判斷計數是否等於-1，等於則reset計數為總長度，在設置當前的圖片動畫，兄弟的圖片動畫 <!DOCTYPE html> <html lang="zh ...

京東輪播圖

有個計數的，點右邊，計數增加，判斷計數是否超過總的長度，超過設置計數為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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

我的第一個原生Web Components——滑塊（SingleSlider）

寫著寫著，就會跑偏，沒錯又走上了一個岔道……就是不知道這條岔道以後會不會越來越寬，有的說他是未來，有的說…… 這裡不知道，也不做什麼評斷。減少一些重覆性的工作，提高開發效率這是最根本的。說白了就是偷懶唄！又說了一大堆廢話。接觸過angularjs、vue還有一點點的reactjs，組件化的思想給開發 ...
CSS中使用文本陰影與元素陰影

文本陰影介紹在中使用屬性設置文本陰影，該屬性一共有個屬性值如：水平陰影、垂直陰影、（清晰度或模糊距離）、陰影顏色。屬性值說明，在文本陰影實踐中：第一個值是設置陰影水平方向移動，第二個值是設置陰影垂直方向移動，第三個值是設置陰影模糊距離，第四個值是設置陰影顏色。屬性值可以設置為負數。文本 ...
jQuery---音樂導航

音樂導航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; list-style: none; } .nav { ...
webpack打包後不能調用,改用uglifyjs打包壓縮

背景：項目基於原生js,沒用到任何腳手架和框架，但也需要打包壓縮。項目的js中聲明瞭一些全局變數供其他js調用。這時候如果用webpack打包，基於webpack特性，會嵌套一層大函數，會將js中的變數變成局部，不能供其他js調用。因此棄用了webpack。選用了uglifyjs。原因： ...
jQuery---手風琴案例+stop的使用（解決動畫隊列的問題）

手風琴案例+stop的使用（解決動畫隊列的問題） stop();// 停止當前正在執行的動畫 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: ...
react-React深入-一等公民-props-onChange

title: '[react]深入 - 一等公民 props & onChange'date: 2017-08-23 10:05:07tags:reactreactjspropsonChange框架reduxcategories:技術寫在前面這篇博客的前身是《React 新手必須知道的10件事》，... ...
jQuery---自定義動畫 animate();

自定義動畫 animate(); 第一個參數：{對象}，裡面可以傳需要動畫的樣式第二個參數：speed 動畫的執行時間第三個參數：easing 動畫的執行效果第四個參數：callback 回調函數 //第一個參數：對象，裡面可以傳需要動畫的樣式 $("#box1").animate({ lef ...
a標簽打開一個已有頁面自動刷新而不是開一個新標簽

https://www.zhangxinxu.com/wordpress/2019/10/a-href-target-window-blank-refresh/ ...