JS---案例：旋轉木馬_ZenDei技術網路在線

JS---案例：旋轉木馬

-Advertisement-

案例：旋轉木馬頁面載入時候出現的效果，script標簽寫在head裡面，body上面顯示一個圖片散開的動畫，遍歷之後，把每個圖片用封裝的動畫函數移動到指定目標（同時改變多屬性：寬，透明度，層級，top, left）在做左右按鈕點擊事件。右邊按鈕，用數組裡面的push和shift，數組第一個去 ...

案例：旋轉木馬

頁面載入時候出現的效果，script標簽寫在head裡面，body上面

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

在做左右按鈕點擊事件。

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

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

在很快點擊的時候，會有混亂的情況（一個函數沒執行完畢下一個執行全擠在一起）所以加了一個鎖flag，保證一個函數執行完畢才進行下一個函數

分別添加進圖片散開，左邊按鈕，右邊按鈕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>

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

-Advertisement-

更多相關文章

js獲取時間差值

1 function GetTime(firstDate, secondDate) { 2 // 1.對事件進行處理 3 var firsttime = Date.parse(firstDate + " 00:00:00"); 4 var secondtime = Date.parse(second ...
jstree設置checkbox單選

jstree設置插件checkbox只允許單選 jstree version 3.3.8 單選配置參數： $.jstree.defaults.core.multiple 示例： ...
HTML 語法簡要總結

HTML基本語法認識網頁網頁主要由文字、圖像和超鏈接等元素構成。當然，除了這些元素，網頁中還可以包含音頻、視頻以及Flash等。常見瀏覽器內核介紹瀏覽器是網頁運行的平臺，常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我們平時稱為五大瀏覽器。 ...
內網穿透、iis配置、natapp配置、

內網穿透相信很多人都會想把自己的電腦做成伺服器，然後掛上網站，讓別人可以訪問自己的網站。的這種想法，恰好，我前幾天學會了個可以把自己電腦做成伺服器，把網頁發佈到外網可以讓別人訪問的方法。前幾天在弄支付寶掃碼支付，因為一直看不懂官方寫的引用文檔，百度的教程也看不懂，然後就去騰訊課堂看關於支付寶掃碼 ...
vue起步

1.vue構造器： var v=new Vue({ ......... }) <div id="d1"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/ ...
js中保存成圖片並下載

1、保存canvas中繪製的內容為圖片 HTML代碼： <canvas id="canvas" width="400" height="400"></canvas> <div> <button id="save">保存</button> </div> js代碼： var arr = [ {locat ...
css之文本兩端對齊

說起text-align，大家一定都不覺得陌生，我們常用關鍵字left、right、center實現行內元素相對父元素左、右、居中對齊，當然我們也使用justify來實現文本兩端對齊。如上圖，兩端對齊相對於左對齊，視覺上顯得整齊有序。但justify對最後一行無效，通常這樣的排版對整段文字是極好的 ...
CSS實現自適應分隔線的N種方法

分割線是網頁中比較常見的一類設計了，比如說知乎的更多回答這裡的自適應是指兩邊的橫線會隨著文字的個數和父級的寬度自適應偷偷的看了一下知乎的實現，很顯然是用一塊白色背景覆蓋的，加一點背景就露餡了心想：知乎的前端也不怎麼樣？可能別人的重點不在這些上面吧下麵列舉幾種更好的實現方式，不會露餡的那種 ...