照片牆切換-基礎篇(7)

點擊之後換照片

一、照片牆點擊切換

(一) 抓取ID

HTML

<div id=”app”>
  <div id=”contentPhone”></div>
    <div class=”menu”>
<nav>
   <a id=”a1"><img src=”../images/05/small/a1.jpg” alt=””></a>
   <a id=”a2"><img src=”../images/05/small/a2.jpg” alt=””></a>
   <a id=”a3"><img src=”../images/05/small/a3.jpg” alt=””></a>
   <a id=”a4"><img src=”../images/05/small/a4.jpg” alt=””></a>
   <a id=”a5"><img src=”../images/05/small/a5.jpg” alt=””></a>
    </nav>
  </div>
</div>

JS 抓取id

window.onload = function () {
   var contentPhone = document.getElementById("contentPhone");
   var a1 = document.getElementById("a1");
   var a2 = document.getElementById("a2");
   var a3 = document.getElementById("a3");
   var a4 = document.getElementById("a4");
   var a5 = document.getElementById("a5");
}

(二) 監聽(click後執行photo1、2…)

a1.addEventListener(“click”, photo1);
a2.addEventListener(“click”, photo2);
a3.addEventListener(“click”, photo3);
a4.addEventListener(“click”, photo4);
a5.addEventListener(“click”, photo5);

(三) 執行function

function photo1() {
    contentPhone.style.backgroundImage =    
    ‘url(“../images/05/big/a1.jpg”)’;
    //裡面有雙引號，外面就加上單引號//
    // (../) 只要上一層的檔案//
}
function photo2() {
    contentPhone.style.backgroundImage = 
    ‘url(“../images/05/big/a2.jpg”)’;
}
function photo3() {
    contentPhone.style.backgroundImage = 
    ‘url(“../images/05/big/a3.jpg”)’;
}
function photo4() {
    contentPhone.style.backgroundImage = 
    ‘url(“../images/05/big/a4.jpg”)’;
}
function photo5() {
    contentPhone.style.backgroundImage = 
    ‘url(“../images/05/big/a5.jpg”)’;
}

二、優化

(一) 將原本function刪除

JS 之 click 改為 showphoto

a1.addEventListener(“click”, showphoto);
a2.addEventListener(“click”, showphoto);
a3.addEventListener(“click”, showphoto);
a4.addEventListener(“click”, showphoto);
a5.addEventListener(“click”, showphoto);

(二)要執行的function

function showphoto() {
    if (this.id === “a1”) {
       
        //this(點擊的物件)，此段意思為點擊到了id，會等於我的a1// 
        //就會出發下列的物件//
        contentPhone.style.backgroundImage =   
        ‘url(“../images/05/big/a1.jpg”)’;
    } else if (this.id === “a2”) {
        contentPhone.style.backgroundImage = 
        ‘url(“../images/05/big/a2.jpg”)’;
} else if ......接下去都依樣

所以我就不用執行一大串的function囉~

三、再優化

上述原本function再減少

(一) 原本

if (this.id === “a1”) {
   contentPhone.style.backgroundImage =  
  ‘url(“../images/05/big/a1.jpg”)’;
}
....

(二) 運用 this.id 的抓取並且結合

contentPhone.style.backgroundImage = 'url("../images/05/big/
' + this.id + '.jpg")';

四、再優化-左右點擊

(一) 目前的HTML，新增了這兩顆按鈕

<a id=”angleleft”><i class=”fas fa-angle-left fa-5x”></i></a>
<a id=”angleright”><i class=”fas fa-angle-right fa-5x”></i></a>

目前的HTML

目前JS

(二) 抓取ID

var angleleft = document.getElementById(“angleleft”);
var angleright = document.getElementById(“angleright”);

(三) 監聽並下click

angleleft.addEventListener(“click”, leftFn);
angleright.addEventListener(“click”, rightFn);

(四) 設置按鈕

現在共有5張照片，可以利用這5張加以數字做為變化，先var一個idx為1

var idx = 1;

我的leftFn

function leftFn() {
idx = 1 + idx;
}

此時按鈕就會不斷+1

將我的 this.id 換成 idx ，前面再補上a，之後就可以換照片囉

function rightFn() {
idx = idx + 1;
phone.style.backgroundImage = ‘url(“../images/05/big/a’ + idx + ‘.jpg”)’;
}

(五) 回歸到1

此時如果一直累加就會出過數字，所以......

設定 if 我的 idx > 5，我的 idx = 1。

function rightFn() {
    idx = idx + 1;
    if (idx > 5) {
    idx = 1;
}

左右兩邊都用一樣的邏輯~

(六) 字串變為數字

在我點擊時出現的是字串，不然我在點擊照片再去點擊左右鍵就會跑掉

使用substr 並變為Number

function showPhoto() {
idx = Number(this.id.substr(1));
phone.style.backgroundImage = ‘url(“../images/05/big/’ + this.id + ‘.jpg”)’;
}

就完成囉~