JavaScript案例之自動切換輪播圖片
效果圖：
思路：
1.先做界面
1.1製作按鈕及點擊觸發事件
1.2引入一張圖片
2.書寫Css
2.1跳轉div盒子的佈局（寬、高、邊框線、水平居中、文字居中...）
3.JavaScript
3.1定義“初始化”函數， 設置定時器 時間爲3000毫秒
3.2定義一個變量 i 即原圖的數字名稱
3.3定義函數：將變量i進行自增。
3.4通過id獲取圖片元素所在位置，並在後面輸出圖片路徑及圖片名稱i 的變量
3.5判斷：當圖片到達最後一張，將圖片變量重置爲0，進行循環遞加到原圖的圖片名稱1上去
參考代碼：
Html代碼
<body onload="init()">
<div "> <input type="button" value="手動切換" onclick="changeImg()" /> <img src="img/1.jpg" width="100%" id="img1"/> </div>
</body>
CSS代碼：
<style type="text/css">
div{
width: 500px;
height: 350px;
border: 1px solid white;
margin: auto;
text-align: center;
}
</style>JavaScript代碼
<script type="text/javascript">
function init(){
setInterval("changeImg()",3000);//輪播圖片顯示的定時操作
} var i = 0;
function changeImg(){
i++;
document.getElementById("img1").src="img/"+i+".jpg"///獲取圖片位置並設置src屬性值
if(i==5){
i=0;
}
}
</script>