記錄：旋轉木馬輪播圖

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>旋轉木馬輪播圖</title>
  <link rel="stylesheet" href="css/index.css"/>
  <script src="common.js"></script>
  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];

    //頁面加載的事件
    window.onload = function () {
      var flag=true;//假設全部的動畫執行完畢了---鎖====================================================
      var list = my$("slide").getElementsByTagName("li");
      //1---圖片散開
      function assign() {
        for (var i = 0; i < list.length; i++) {
          //設置每一個li,都要把寬,層級,透明度,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>