JS---案例：旋轉木馬

時間 2019-12-24

標籤案例旋轉木馬欄目 JavaScript 简体版

原文原文鏈接

案例：旋轉木馬

頁面加載時候出現的效果，script標籤寫在head裏面，body上面javascript

顯示一個圖片散開的動畫，遍歷以後，把每一個圖片用封裝的動畫函數移動到指定目標（同時改變多屬性：寬，透明度，層級，top, left）css

在作左右按鈕點擊事件。html

右邊按鈕，用數組裏面的push和shift，數組第一個去除加到最後一個位置java

左邊按鈕，unshift最後一個pop到第一個數組

在很快點擊的時候，會有混亂的狀況（一個函數沒執行完畢下一個執行全擠在一塊兒）因此加了一個鎖flag，保證一個函數執行完畢才進行下一個函數ide

分別添加進圖片散開，左邊按鈕，右邊按鈕3個事件裏面。函數

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>旋轉木馬輪播圖</title>
  <link rel="stylesheet" href="css/css(1).css" />
  <script src="common.js"></script>
  <script>
    var config = [
      {
        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
      }
    ];


    //頁面加載的事件
    window.onload = function () {
      var flag = true; //假設全部的動畫執行完畢了---鎖=====================================
      var list = my$("slide").getElementsByTagName("li");

      //圖片散開
      function assign() {
        for (var i = 0; i < list.length; i++) {
          //設置每一個li，用封裝的animate函數，把寬，層級，透明度，left,top移動到制定的目標位置
          animate(list[i], config[i], function () {
            flag = true; //==============================================================
          })
        }
      };
      assign();

      //右邊按鈕
      my$("arrRight").onclick = function () {
        if (flag) { //=====================================================================
          flag = false;
          config.push(config.shift());
          assign();// 從新分配
        }
      };

      //左邊按鈕
      my$("arrLeft").onclick = function () {
        if (flag) {
          flag = false;
          config.unshift(config.pop());
          assign();
        }
      };

      //鼠標進入，左右焦點的div顯示
      my$("slide").onmouseover = function () {
        animate(my$("arrow"), { "opacity": 1 });
      };

      //鼠標離開，左右焦點的div隱藏
      my$("slide").onmouseout = function () {
        animate(my$("arrow"), { "opacity": 0 });
      };
    };

  </script>

</head>

<body>
  <div class="wrap" id="wrap">
    <div class="slide" id="slide">
      <ul>
        <li><a href="#"><img src="images/slidepic1.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="images/slidepic5.jpg" alt="" /></a></li>
      </ul>
      <div class="arrow" id="arrow">
        <a href="javascript:;" class="prev" id="arrLeft"></a>
        <a href="javascript:;" class="next" id="arrRight"></a>
      </div>
    </div>
  </div>

</body>

</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。