實現(xiàn)效果：
![]()
圖片切換.gif
圖片切換.gif
說明：這里尋找元素方式均為ID方式宪躯，且代碼執(zhí)行較慢（if嵌套比較多），只是就自己現(xiàn)在能力寫的代碼，其中的圖片可自行更換自己喜歡的圖片鸟废。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS圖片切換小實例</title>
<style type="text/css">
p{margin: 0px;}
body{text-align: center;}
#frame{width: 400px;height: 400px;border: 10px solid #ccc;margin:40px auto 0; position: relative;}
/*設(shè)置整體div為400*400悍缠，邊框卦绣，在屏幕水平居中且離上邊40像素，相對定位*/
#frame a{width:40px; height: 40px;background: #000;border: 5px solid #fff;position: absolute;top: 175px;text-decoration: none;text-align: center;font-weight: bold;line-height: 40px;color:#fff; alpha(opacity:70);opacity: 0.7;}
#frame a:hover{filter:filter: alpha(opacity:40);opacity: 0.4;}
#front{left: 10px;}
#next{right: 10px;}
#num{width: 400px;height: 30px;background: #000;color: #fff;font-size: 14px;text-align: center;line-height: 30px; position: absolute;top: 0px;left: 0px;filter: alpha(opacity:80);opacity: 0.8;}
#word{width: 400px;height: 30px;background: #000;color: #fff;font-size: 14px;text-align: center;line-height: 30px; position: absolute;bottom: 0px;left: 0px;filter: alpha(opacity:80);opacity: 0.8;}
#img1{width:400px;height: 400px; }
strong { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0;font-weight: normal;}
</style>
<script type="text/javascript">
window.onload = function (){
var oFront = document.getElementById('front'); //<（上一張）
var oNext = document.getElementById('next'); //>（下一張）
var oNum = document.getElementById('num'); //數(shù)字
var oWord = document.getElementById('word'); //文字
var oImg = document.getElementById('img1'); //圖片
var oBtn1 = document.getElementById('btn1'); //循環(huán)切換按鈕
var oBtn2 = document.getElementById('btn2'); //順序切換按鈕
var oStrong = document.getElementById('strong1'); //對按鈕的描述
/*
document.getElementById('XXX')是查詢頁面上id為XXX的元素
document.getElementsByTagName("XXX")是查詢頁面上所有的XXX標簽元素飞蚓，返回一數(shù)組列表
*/
var num = 0;//設(shè)置數(shù)字變量
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];//存放圖片地址的數(shù)組
var arrWord = ['文字一','文字二','文字三','識文斷字'];//存放文字的數(shù)組
var onOff = true;//設(shè)置布爾值（0/1）
oBtn1.onclick = function(){onOff = true;oStrong.innerHTML = '圖片可從最后一張?zhí)D(zhuǎn)到第一張循環(huán)切換';}
oBtn2.onclick = function(){onOff = false;oStrong.innerHTML = '圖片只能到最后一張\或只能到第一張切換';}
function fnTab(){
oImg.src = arrUrl[num];
oNum.innerHTML = num+1 + '/' + arrUrl.length;
oWord.innerHTML = arrWord[num];
}//初始化
fnTab();
oFront.onclick = function(){
if(onOff){
if(num == -1){
num = 3;
}
fnTab();
num--;
}else if(num == -1){
alert('已經(jīng)是第一張啦滤港！');
}
else{fnTab();num--;}
}
oNext.onclick = function(){
if(onOff){
if(num == 3){num = -1;}
num++;
fnTab();
}else if(num == 3){
alert('已經(jīng)是最后一張啦！');
}else{num++;fnTab();}
}
}
</script>
</head>
<body>
<input type="button" value="循環(huán)切換" id="btn1">
<input type="button" value="順序切換" id="btn2">
<div id="frame">
<strong id="strong1">圖片可從最后一張?zhí)D(zhuǎn)到第一張循環(huán)切換</strong>
<a href="javascript:;" id="front"><</a>
<a href="javascript:;" id="next">></a>
<span id="num">數(shù)量加載中...</span>
<p id="word">文字加載中...</p>
<img src="" id="img1" />
</div>
</body>
</html>
小感慨：這個代碼陸陸續(xù)續(xù)寫了兩天趴拧，寫不出來的時候是真的蠻鬧心的溅漾，但是都比不了寫出來的成就感，也許這就是編程的魅力著榴。
