js點選實現多圖順序切換和迴圈切換效果程式碼

admin發表於2017-04-12
JS

本章節分享一段程式碼例項，它利用js實現的多圖迴圈效果。

實現順序迴圈，當到達最後一張圖片以後會給出提示，當使用迴圈切換方式時候，可以實現迴圈切換。

下面就給出程式碼，並且給出詳細的介紹，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
p {
  margin: 0;
}
input {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}
img {
  width: 300px;
  height: 300px;
}
#loop {
  margin-left: 50px;
  background: #c80;
  width: 60px;
  height: 40px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
#order {
  margin-left: 50px;
  background: #c80;
  width: 60px;
  height: 40px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
div {
  width: 300px;
  height: 300px;
  position: relative;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  width: 300px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  background: #000;
  opacity: 0.5;
  color: #fff;
  text-align: center;
}
div p {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  background: #000;
  opacity: 0.5;
}
div input {
  position: absolute;
  width: 60px;
  height: 60px;
  top: 100px;
  background: pink;
}
#back {
  left: 0;
}
#next {
  right: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
  //迴圈切換
  var oNext = document.getElementById("next");
  var oBack = document.getElementById("back");
  var oImg = document.getElementById("img");
  var oText = document.getElementById("text");
  var oSpan = document.getElementById("span");
  var oLoop = document.getElementById("loop");
  var Oorder = document.getElementById('order');
  var oText1 = document.getElementById("text1");
  var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"];
  var aText = ["圖片1", "圖片2", "圖片3", "圖片4"];
 
  var num = 0;
  //點選下一張事件
  function next() {
    num = num + 1; //每次加一
    //進行判斷，如果num大於最後一張時,圖片返回第一張
    // 1 2 3 4
    if (num > aImg.length - 1) {
      num = 0;
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];//圖片資訊變化，與陣列關聯
    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//數量變化，與陣列關聯
  }
  function back() {
    num = num - 1;
    //進行判斷，如果圖片小於第一張時,圖片返回最後一張
    if (num < 0) {
      num = aImg.length - 1;
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];//圖片資訊變化，與陣列關聯
    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//數量變化，與陣列關聯
  }
  function next1() {
    num = num + 1; //每次加一
    //進行判斷，如果num大於最後一張時,彈出警告並把圖片定在最後一張
    // 1 2 3 4
    if (num > aImg.length - 1) {
      num = aImg.length - 1;
      alert("最後一張了");
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];
    oSpan.innerHTML = num + 1 + "/" + aImg.length;
  }
  function back1() {
    num = num - 1;
    //進行判斷，如果圖片小於第一張時，彈出警告並把圖片定在第一張
    if (num < 0) {
      num = 0;
      alert("已經是第一張了");
    }
    oImg.src = aImg[num];
    oText.innerHTML = aText[num];
    oSpan.innerHTML = num + 1 + "/" + aImg.length;
  }
 
  oNext.onclick = next;
  oBack.onclick = back;
  oLoop.onclick = function () {
    oText1.innerHTML = "圖片可以從第一張到最後一張迴圈切換";
    oNext.onclick = next;
    oBack.onclick = back;
  }
  Oorder.onclick = function () {
    oText1.innerHTML = "圖片只能從第一張到最後一張順序切換";
    oNext.onclick = next1;
    oBack.onclick = back1;
  }
}
</script>
</head>
<body>
<input id="loop" type="button" name="" value="迴圈切換" />
<input id="order" type="button" name="" value="順序切換" />
<p id="text1">圖片可以從第一張到最後一張迴圈切換</p>
<div>
  <input id="back" type="button" name="" value="上一張" />
  <input id="next" type="button" name="" value="下一張" />
  <img id="img" src="demo/js/img/1.jpg" />
  <span id="span">1/4</span>
  <p id="text">圖片1</p>
</div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.var oNext = document.getElementById("next")，獲取對應id的元素物件。

（2）.var aImg = ["demo/js/img/1.jpg", "demo/js/img/2.jpg", "demo/js/img/3.jpg", "demo/js/img/4.jpg"]，建立一個陣列，裡面存放的是圖片的地址。

（3）.var aText = ["圖片1", "圖片2", "圖片3", "圖片4"]，建立一個陣列，裡面存放的是文字說明。

（4）.var num = 0，宣告一個變數並賦值為0，後面會有使用。

（5）.function next() {

    num = num + 1; 

    if (num > aImg.length - 1) {

      num = 0;

    }

    oImg.src = aImg[num];

    oText.innerHTML = aText[num];//圖片資訊變化，與陣列關聯

    oSpan.innerHTML = (num + 1) + "/" + aImg.length;//數量變化，與陣列關聯

  }，作為可以迴圈的的下一張事件處理函式。

點選以後，num會加1,。

如果num的數目大於aImg.length - 1，因為num是從0開始，也就是超過了圖片的最大數目。

那麼就將num重置為0，也就是從頭再開始一遍。

然後根據索引設定src值，和文字內容。

二.相關閱讀:

（1）.innerHTML屬性可以參閱innerHTML一章節。

（2）.onclick事件可以參閱javascript click事件一章節。

相關文章