當前位置 主頁 > 網站技術 > 代碼類 > 最大化 縮小

    JS實現旋轉木馬輪播圖

    欄目:代碼類 時間:2020-01-01 18:08

    本文實例為大家分享了JS實現旋轉木馬輪播圖的具體代碼,供大家參考,具體內容如下

    知識點

    1、旋轉木馬思想:

    1)、固定五種圖片的位置信息jsonArr進行布局
    2)、點擊<或者>會對jsonArr進行重新排序,重新排序后對界面重新進行布局

    2、數據驅動界面,數據的改變會影響界面

    3、數組的四種操作

    ① push:push() 方法可向數組的末尾添加一個或多個元素,并返回新的長度。
    ② pop:pop() 方法用于刪除并返回數組的最后一個元素。
    ③ shift:shift() 方法用于把數組的第一個元素從其中刪除,并返回第一個元素的值。
    ④ unshift:unshift() 方法可向數組的開頭添加一個或更多元素,并返回新的長度。

    引入工具庫工具庫

    運行效果

    代碼:

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <title></title>
     <style>
      * {
       margin: 0;
       padding: 0;
       border: none;
       list-style: none;
      }
    
      img {
       vertical-align: top;
      }
    
      body {
       background-color: #000;
      }
    
      #slider {
       width: 1200px;
       height: 460px;
       margin: 100px auto;
       position: relative;
       /*background-color: red;*/
      }
    
      #slider li {
       position: absolute;
       left: 200px;
       top: 0;
      }
    
      #slider li img {
       width: 100%;
       height: 100%;
      }
    
      .slider_ctl_prev, .slider_ctl_next {
       width: 76px;
       height: 112px;
       position: absolute;
       top: 50%;
       margin-top: -56px;
       z-index: 99;
      }
    
      #slider_ctl {
       opacity: 0;
      }
    
      .slider_ctl_prev {
       background: url("images/prev.png") no-repeat;
       left: 0;
      }
    
      .slider_ctl_next {
       background: url("images/next.png") no-repeat;
       right: 0;
      }
     </style>
    </head>
    <body>
    <div >
     <ul >
      <li><img src="images/slidepic1.jpg" alt=""></li>
      <li><img src="images/slidepic2.jpg" alt=""></li>
      <li><img src="images/slidepic3.jpg" alt=""></li>
      <li><img src="images/slidepic4.jpg" alt=""></li>
      <li><img src="images/slidepic5.jpg" alt=""></li>
     </ul>
     <div >
      <span class="slider_ctl_prev"></span>
      <span class="slider_ctl_next"></span>
     </div>
    </div>
    <script src="../00MyTools/MyTools.js"></script>
    <script>
     window.addEventListener('load',function (ev) {
      // 1. 獲取需要標簽
      var slider = myTool.$('slider');
      var sliderMain = myTool.$('slider_main');
      var allLis = sliderMain.children;
      var sliderCtl = myTool.$('slider_ctl');
    
      // 2. 位置信息
      var jsonArr = [
       {"width":"400", "top":"20", "left":"50", "opacity":"0.2", "zIndex":"2"},
       {"width":"600", "top":"70", "left":"0", "opacity":"0.8", "zIndex":"3"},
       {"width":"800", "top":"100", "left":"200", "opacity":"1", "zIndex":"4"},
       {"width":"600", "top":"70", "left":"600", "opacity":"0.8", "zIndex":"3"},
       {"width":"400", "top":"20", "left":"750", "opacity":"0.2", "zIndex":"2"}
      ];
      // 將位置信息作用到圖片上去
      for (var i = 0; i < jsonArr.length; i++) {
       myTool.slowMoving(allLis[i], jsonArr[i]);
      }
      // 3. 設置顯示和隱藏
      slider.addEventListener('mouseover', function () {
       myTool.slowMoving(sliderCtl, {'opacity': 1});
      });
    
      slider.addEventListener('mouseout', function () {
       myTool.slowMoving(sliderCtl, {'opacity': 0});
      });
    
      // 4. 監聽點擊
      for (var j = 0; j < sliderCtl.children.length; j++) {
       var item = sliderCtl.children[j];
       item.addEventListener('click',function (evt) {
        if (this.className === 'slider_ctl_prev'){
         // 點擊左邊
         // 兩種方式
         // 1. 改變數據影響標簽 數據驅動界面
         // 2. 改變標簽適應數據
         jsonArr.push(jsonArr.shift())
        }else{
         // 點擊右邊
         jsonArr.unshift(jsonArr.pop())
        }
    
        // 重新布局
        for (var i = 0; i < jsonArr.length; i++) {
         myTool.slowMoving(allLis[i], jsonArr[i]);
        }
       },false);
      }
     },false)
    </script>
    </body>
    </html>
    
    下一篇:沒有了
青海十一选五开奖数据