利用js來(lái)實(shí)現(xiàn)簡(jiǎn)單圖片切換

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

　　利用js來(lái)實(shí)現(xiàn)簡(jiǎn)單圖片切換怎么做？直奔主題吧。

　　我們要說(shuō)下代碼的主要思路：

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

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

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

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

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

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

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

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

　　<!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 () {
　　/**
　　* 點(diǎn)擊按鈕實(shí)現(xiàn)圖片的切換
　　*/
　　//3、獲取img標(biāo)簽
　　var img = document.getElementsByTagName("img")[0];
　　//5、創(chuàng)建一個(gè)數(shù)組用于保存圖片的路徑
　　var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];
　　//6、創(chuàng)建一個(gè)變量保存當(dāng)前正在顯示的圖片的索引
　　var index = 0;//默認(rèn)顯示的是第一張
　　//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í)，那么就要將索引設(shè)置為最后一張，由于采用的是--index，所以將index設(shè)置為5
　　if (index == 0) {
　　index = 5;
　　}
　　index = index - 1;
　　//4、切換圖片，實(shí)質(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í)，那么就要將索引設(shè)置為第一張，由于采用的是++index，所以將index設(shè)置為-1
　　if (index == 4) {
　　index = -1;
　　}
　　index = index + 1;
　　//4、切換圖片，實(shí)質(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>

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