方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>autoChangeImages</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <script type = "text/javascript" language = "javascript" src = "autoChangeImages.js"></script>
<link rel = "stylesheet" type = "text/css" href = "style.css" /> -->
</head>
<style>
#contain{
float:left;
width: 900px;
height: 240px;
border: 1px dotted red;
}
.imageShow{
width: 900px;
height: 238px;
border: 1px dashed Olive;
background: url(images/0.png);
}
#posi{
margin: -30px 0 0 700px;
width: 100px;
height: 25px;
}
.radio{
width: 15px;
height: 15px;
margin-left: -8px;
cursor: pointer;
background: red;
}
</style>
<body onLoad = "autoChangeImage();">
<div id = "contain"> <!--圖片展示內容框-->
<div id = "imgIndex" class = "imageShow"> <!--默認顯示圖片框-->
</div>
<div id = "posi"><!--按鈕位置-->
<input id = "radio0" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(0)" />
<input id = "radio1" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(1)" />
<input id = "radio2" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(2)" />
<input id = "radio3" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(3)" />
<input id = "radio4" class = "radio" name = "lit" type = "radio" value = "0" onClick="changeImage(4)" />
</div>
</div>
</body>
<script>
var i = 1;
function autoChangeImage(i){ //自動改變圖片
setTimeout("changeImage(i++); ", 1500);
setTimeout("back(i); ", 1000);
setTimeout("autoChangeImage(i = (i%5)); ", 1500);
}
function changeImage(idNum){
document.getElementById("radio" + idNum).checked = "checked";
switch(idNum){
case 0:
document.getElementById("imgIndex").style.backgroundImage = "url(http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc21780628f11.jpg)";//改變首頁圖片
break;
case 1:
document.getElementById("imgIndex").style.backgroundImage = "url(images/1.png)";
break;
case 2:
document.getElementById("imgIndex").style.backgroundImage = "url(images/2.png)";
break;
case 3:
document.getElementById("imgIndex").style.backgroundImage = "url(images/3.png)";
break;
case 4:
document.getElementById("imgIndex").style.backgroundImage = "url(images/4.png)";
break;
}
}
</script>
</html>
方法二：
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<style>
img{display:none;}
.btn{border:1px solid black;width:30px;height:30px;display:inline;margin-right:5px;}
</style>
<script>
var index=1;//當前顯示的圖片索引(1-5)
var timer;
function switchImg(){
// 當前這一張隱藏
document.getElementById("img"+index).style.display="none";
// 如果當前顯示的圖片索引沒有到最大值就繼續增加
if(index<5){index++;}
// 否則從第一個圖片開始顯示，索引從0開始
else{index=1;}
// 顯示第index張
document.getElementById("img"+index).style.display="block";
// 下一秒,再執行本方法
timer = window.setTimeout("switchImg()",1000);
}
</script>
</head>
<body οnlοad="switchImg()">
放五張圖,構造一個ImageList
<div style="border:1px solid black;width:300px;height:100px;">
<img id="img1" src="http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc21780628f11.jpg">
<img id="img2" src="http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc21780629513.jpg">
<img id="img3" src="http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc21780629d16.jpg">
<img id="img4" src="http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc2178062a31a.jpg">
<img id="img5" src="http://images.china.cn/attachement/jpg/site1000/20151008/001fd04cfbc2178062a91f.jpg">
</div>
<div id="btn1" οnclick="manuImg()"></div>
<div id="btn2"></div>
<div id="btn3"></div>
<div id="btn4"></div>
<div id="btn5"></div>
</body>
</html> -->
