JavaScript 練習 - 縮圖預覽 Silder

PV:

Demo

JavaScript 練習 - 縮圖預覽 Silder - Demo

Introduction 介紹

這是一個線上課程案例，有些想添加的功能還沒進行，先把目前完成的部份整理出來

  • 動態載入圖片、文字
  • 按鍵可預覽縮圖
  • 按鍵可呈現縮圖倒影

功能

設定 HTML 結構

這個 Silder 分為圖片區塊與按鍵區塊。圖片區塊內有文字標題及圖片，每個圖片對應一個按鍵。這個 Silder 的作法是動態載入圖片，所以只要在 HTML 結構放入要更換的模版。模版結構裡花括號都是要在切換圖片時要動態替換的資料。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div class="silder">
  <!-- 幻燈片區域 -->
  <div class="main main-item-active" id="template-main">
    <div class="main-item {{css}}" id="main-{{index}}">
      <div class="caption">
        <h1>{{h2}}</h1>
        <h2>{{h3}}</h2>
      </div>

      <img src="./img/{{index}}.jpg" class="picture" />
    </div>
  </div>

  <!-- 按鈕區域 -->
  <div class="ctrl " id="template-ctrl">
    <a
      class="ctrl-item "
      id="ctrl-{{index}}"
      href="javascript:switchSlider({{index}});"
    >
      <img src="./img/{{index}}.jpg" />
      <h4>{{h4}}</h4>
    </a>
  </div>
</div>

預先定義 CSS active 屬性

這個 Silder 的切換是利用 JavaScript 動態添加、移除 CSS 屬性達到的。這裡我們先定義好 main-item-active 屬性，切換 right:50% / right:0% 達到圖片區塊的移動效果，以及h1和h2動態篇移的位置，
動態載入的時候會從預設的位置動態篇移到 right:0。最後是也用 ctrl-item-active 切換按鍵的樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.main-item {
  right: 50%;

  img {
    width: 100%;
    z-index: 1;
    position: absolute;
  }

  .caption {
    h1 {
      margin-right: 45px;
      -webkit-transition: all 1s 0.8s;
    }

    h2 {
      margin-right: -45px;
      -webkit-transition: all 1s 0.8s;
    }
  }
}

/*要動態添加的圖片區塊屬性*/

.main-item-active {
  right: 0;

  -webkit-transition: ease-in 0.5s;

  .caption {
    h1,
    h2 {
      margin-right: 0;
    }
  }
}

/*要動態添加的按鍵屬性*/

.ctrl {
  .ctrl-item {
    .ctrl-item_active {
      background-color: #000;

      &:hover {
        background-color: #000;

        img {
          opacity: 0;
        }
      }
    }
  }
}

定義數據結構與取得 DOM

由於是動態載入圖片，因此要先定義數據結構。接著設定條件句取得模版的 DOM。這裡使用函式表示式 (function expression) ，透過 變數名稱 = function([參數]){ ... }; 的方式，將一個函式透過 = 指定給某個變數。

像這樣
var square = function (number) {
return number * number;
};

所以可以在函式裡設定條件句，依據我們的要求，回傳具有該 ID 的模版，或者取得具備該 classname 的模版。如果傳入的參數是例如.ctrl-item 則會把 . 之後的字符串作為參數傳入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var data = [
  {
    img: 1,
    h1: "Creative",
    h2: "Fella",
    h3: "Creative Fella",
    h6: "Call to action"
  },
  {
    img: 2,
    h1: "Friendly",
    h2: "Evil",
    h3: "Friendly Evil"
  },
  {
    img: 3,
    h1: "Tranquil ",
    h2: "Eye",
    h3: "Tranquil Eye"
  },
  {
    img: 4,
    h1: "Cocteau",
    h2: "Twins",
    h3: "Cocteau Twins"
  },
  {
    img: 5,
    h1: "Belle",
    h2: "Angus",
    h3: "Belle Angus"
  },
  {
    img: 6,
    h1: "Passion",
    h2: "amour",
    h3: "Passion amour"
  }
];

var general = function(id) {
  if (id.substr(0, 1) == ".") {
    return document.getElementsByClassName(id.substr(1));
  }
  return document.getElementById(id);
};

動態新增幻燈片

接著要開始新增幻燈片。首先要在載入畫面時就呼叫新增幻燈片的函式。 接著來測試一下上一個取得模版的設定是不是有效。


上面的測試顯示已經獲取 template-main 整個模版結構，裡面包含每一個幻燈片具備的元素，首先我們把它前後的空白去除。對切換鍵也是同樣設定。接著使用迴圈遍歷資料結構，再把剛剛模版裡的 index、h2、h3 依序替換掉為實際數據，建構輸出的 HTML。最後用 push() 輸回到我們要輸出的數據裡面。最後把 HTML 回寫到對應的 DOM 裡面，使用 join() 方法會將類陣列物件中的所有元素連接合併成一個字串，並回傳此字串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function addSilder() {
  var tpl_main = general("template-main");
  .innerHTML.replace(/^\s*/, "")
  .replace(/\s*$/, "");
  var tpl_ctrl = general("template-ctrl")
    .innerHTML.replace(/^\s*/, "")
    .replace(/\s*$/, "");

  var out_main = [];
  var out_ctrl = [];
  for (i in data) {
    var _html_main = tpl_main
      .replace(/{{index}}/g, data[i].img)
      .replace(/{{h2}}/g, data[i].h1)
      .replace(/{{h3}}/g, data[i].h2)

      .replace(/{{css}}/g, ["", "main-item-right"][i % 2]);

    var _html_ctrl = tpl_ctrl
      .replace(/{{index}}/g, data[i].img)
      .replace(/{{h4}}/g, data[i].h3)
      .replace(/{{h5}}/g, data[i].h6);
    out_main.push(_html_main);
    out_ctrl.push(_html_ctrl);
  }

  general("template-main").innerHTML = out_main.join("");
  general("template-ctrl").innerHTML = out_ctrl.join("");
}

window.onload = function() {
  addSilder();
  switchSlider(2);
};

切換幻燈片

切換幻燈片不使用鏈結移動頁面，而是藉由點擊啟動 javascript 函數。所以我們要在按鍵上放入一個花括號及索引，函式裡傳入的參數 n來源是圖片，是與圖片的名稱是一致的。現在要獲得要展現的幻燈片及控制按鈕。

切換效果是透過添加 main-item-active到每一張圖片達到的。但在為當前展示的圖片添加 active 屬性之前，要把其他沒展示的圖片的 active 屬性清除。

1
2
3
4
5
6
7
8
9
10
<div class="ctrl " id="template-ctrl">
  <a
    class="ctrl-item "
    id="ctrl-{{index}}"
    href="javascript:switchSlider({{index}});"
  >
    <img src="./img/{{index}}.jpg" />
    <h4>{{h4}}</h4>
  </a>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function switchSlider(n) {
  var main = general("main-" + n);
  var ctrl = general("ctrl-" + n);

  //獲得所有幻燈片及控制按鈕
  var clear_main = general(".main-item");
  var clear_ctrl = general(".ctrl-item");

  //清除他們的樣式
  for (i = 0; i < clear_ctrl.length; i++) {
    clear_main[i].className = clear_main[i].className.replace(
      " main-item-active",
      ""
    );
    clear_ctrl[i].className = clear_ctrl[i].className.replace(
      " ctrl-item-active",
      ""
    );
  }

  main.className += " main-item-active";
  ctrl.className += " ctrl-item-active";

  setTimeout(function() {
    general("main-background").innerHTML = main.innerHTML;
  }, 1000);
}

添加切換時圖片底下的背景、改變圖片切換方向

為幾個圖片添加不同的切換方向屬性，這是由取得餘數決定的，共有六張圖片，所以會添加在 2、4、6 張圖片。接著要為切換圖片時添加一張底圖，這張底圖來源是目前被切換掉的「那一張」。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function addSilder() {
  for (i in data) {
    var _html_main = tpl_main.replace(
      /{{css}}/g,
      ["", "main-item-right"][i % 2]
    );
  }

  general("main-{{index}}").id = "main-background";
}

function switchSlider(n) {
  setTimeout(function() {
    general("main-background").innerHTML = main.innerHTML;
  }, 1000);
}

Powered by Hexo and Hexo-theme-hiker

Copyright © 2013 - 2020 CYC'S BLOG All Rights Reserved.

UV : | PV :