利用js來實現(xiàn)簡單圖片切換

3403771864 發(fā)布于2022-10-26 22:37 / 676人閱讀

　　利用js來實現(xiàn)簡單圖片切換怎么做？直奔主題吧。

　　我們要說下代碼的主要思路：

　　1、先給“下一張”和“上一張”兩個按鈕綁定單擊響應(yīng)事件；

　　2、獲取img標簽對象，用于修改src屬性的值，實現(xiàn)圖片的切換；

　　3、切換圖片實質(zhì)上就是修改img標簽里面src屬性的值；

　　4、創(chuàng)建一個數(shù)組用來保存圖片，這樣的話，在圖片切換的過程中操作起來會更加方便，只要操作數(shù)組的索引即可，如要切換到下一張，將imgArr[0]---->imgArr[1]，即可；

　　5、創(chuàng)建一個變量用來保存當(dāng)前正在顯示的圖片的索引，這樣操作圖片更加簡單；

　　6、需要注意的是，如果當(dāng)前顯示的圖片為最后一張時，下一張使它自動跳回第一張；同理如果當(dāng)前顯示的圖片為第一張時，上一張使它自動跳回最后一張；

　　7、設(shè)置頂部的文字先要獲取對應(yīng)的p標簽對象；

　　8、通過修改p標簽里面的文字就可以實現(xiàn)頂部文字的實時變換；

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<title>圖片切換練習(xí)</title>
　　<style type="text/css">
　　* {
　　margin: 0;
　　padding: 0;
　　}
　　#outer {
　　width: 500px;
　　margin: 50px auto;
　　padding: 30px;
　　background-color: aquamarine;
　　}
　　</style>
　　<script type="text/javascript">
　　window.onload = function () {
　　/**
　　* 點擊按鈕實現(xiàn)圖片的切換
　　*/
　　//3、獲取img標簽
　　var img = document.getElementsByTagName("img")[0];
　　//5、創(chuàng)建一個數(shù)組用于保存圖片的路徑
　　var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
　　//6、創(chuàng)建一個變量保存當(dāng)前正在顯示的圖片的索引
　　var index = 0;//默認顯示的是第一張
　　//8、獲取id為info的元素
　　var info = document.getElementById("info");
　　//9、設(shè)置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　//1、給上一張按鈕綁定單擊事件
　　var prev = document.getElementById("prev");
　　prev.onclick = function () {
　　//7、當(dāng)索引為第一張時，那么就要將索引設(shè)置為最后一張，由于采用的是--index，所以將index設(shè)置為5
　　if (index == 0) {
　　index = 5;
　　}
　　index = index - 1;
　　//4、切換圖片，實質(zhì)上就是修改img里面的src屬性
　　img.src = imgArr[index];
　　//9、設(shè)置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　}
　　//2、給下一張按鈕綁定單擊事件
　　var next = document.getElementById("next");
　　next.onclick = function () {
　　//7、當(dāng)索引為最后一張時，那么就要將索引設(shè)置為第一張，由于采用的是++index，所以將index設(shè)置為-1
　　if (index == 4) {
　　index = -1;
　　}
　　index = index + 1;
　　//4、切換圖片，實質(zhì)上就是修改img里面的src屬性
　　img.src = imgArr[index];
　　//9、設(shè)置提示文字
　　info.innerHTML = "一共" + imgArr.length + "張圖片， 這是第" + (index + 1) + "張";
　　}
　　}
　　</script>
　　</head>
　　<body>
　　<div id=outer>
　　<p id=info></p>
　　<img src="img/1.jpg" alt="冰棍"/><br/>
　　<button id="prev">上一張</button>
　　<button id="next">下一張</button>
　　</div>
　　</body>
　　</html>

　　完成后的效果：實際就是在每次點擊下一張或者上一張會實現(xiàn)圖片的切換，同時頂部的提示文字也會隨之發(fā)生改變。