<!DOCTYPE html><html> <!-- 圖片輪播的效果可以用bootstrap框架來實現，也可以自己直接寫，這裡採用了自己寫的方式來實現--><head><meta charset="UTF-8"><title>Insert title here</title></head><styl ...
<!DOCTYPE html>
<html>
<!-- 圖片輪播的效果可以用bootstrap框架來實現，也可以自己直接寫，這裡採用了自己寫的方式來實現-->
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
body{text-align : center}
div{margin : 100px auto; width : 790px; positision : relative}
.an{positision : absolute; right : 200px; bottom : 50px ;height :0px}
.an a{text-decoration : none; padding : 2px 5px;background-color : #F00}
</style>
<body>
<div>
<!-- 選擇輪播顯示的圖片，通過display屬性來選擇圖片的隱藏或者顯示-->
<img src = "images/banner1.jpg" id = "1" width = "790px" height = "340px" style = "display : block">
<img src = "images/banner2.jpg" id = "2" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner3.jpg" id = "3" width = "790px" height = "340px" style = "display : none">
<img src = "images/banner4.jpg" id = "4" width = "790px" height = "340px" style = "display : none">
<!-- 做右下角的1234小標簽-->
<div class = "an">
<a href = "" onclick = "change(1)">1</a>
<a href = "" onclick = "change(2)">2</a>
<a href = "" onclick = "change(3)">3</a>
<a href = "" onclick = "change(4)">4</a>
</div>
</div>
<script type = "text/javascript">
//num記錄當前顯示的圖片id
var num = 1;
var flag;
function change(n){
//isNaN(n) 判斷n是否是數字,若是數字，改變number
if(!isNaN(Number(n))){
num = n;
//清空計時器
window.clearTimeout(flag);
}
//獲取所有圖片標簽，通過改變display控製圖片顯示與隱藏，實現輪播效果
var images = document.getElementsByTagName("img");
for(i = 0;i < images.length;i++){
if(images[i].id == num){
images[i].style.display = "block"
}else{
images[i].style.display = "none";
}
}
if(num == 4){
num = 1;
}else{
num++;
}
//設置計時器自動執行方法，實現迴圈
flag = window.setTimeout("change()",1000);
}
change();
</script>
</body>
</html>
