快捷導(dǎo)航

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

更新時間：2022年07月12日 09:34:35 作者：PCC.

這篇文章主要為大家詳細介紹了js實現(xiàn)簡單圖片切換，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)圖片間切換的具體代碼，供大家參考，具體內(nèi)容如下

代碼的主要思路：

1、先給“下一張”和“上一張”兩個按鈕綁定單擊響應(yīng)事件；
2、獲取img標(biāo)簽對象，用于修改src屬性的值，實現(xiàn)圖片的切換；
3、切換圖片實質(zhì)上就是修改img標(biāo)簽里面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標(biāo)簽對象；
8、通過修改p標(biāo)簽里面的文字就可以實現(xiàn)頂部文字的實時變換；

<!DOCTYPE html>
<html lang="en">
<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標(biāo)簽
? ? ? ? ? ? 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 align="center">
? ? <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ā)生改變。