楊老師課堂之JavaScript案例手動切換輪播圖檔

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/kese7952/article/details/79905879

JavaScript案例之手動切換輪播圖檔

效果圖：

思路：

    1.先做界面

        1.1制作按鈕及點選觸發事件

        1.2引入一張圖檔

    2.書寫Css

        2.1跳轉div盒子的布局（寬、高、邊框線、水準居中、文字居中...）

   3.JavaScript

        3.1    定義一個變量 i  即原圖的數字名稱

        3.2定義函數：将變量i進行自增。

        3.3通過id擷取圖檔元素所在位置，并在後面輸出圖檔路徑及圖檔名稱i 的變量

        3.4判斷：當圖檔到達最後一張，将圖檔變量重置為0，進行循環遞加到原圖的圖檔名稱1上去

參考代碼：

        Html代碼

                <div ">
			<input type="button" value="手動切換" onclick="changeImg()" />
			<img src="img/1.jpg" width="100%" id="img1"/>
		</div>      

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">
		var i = 0;
		function changeImg(){
			i++;
			document.getElementById("img1").src="img/"+i+".jpg"
			if(i==5){
			    i=0;
			}
		}
</script>      

作者： 楊校

出處： 

http://blog.csdn.net/kese7952

分享是快樂的，也見證了個人成長曆程，文章大多都是工作經驗總結以及平時學習積累，基于自身認知不足之處在所難免，也請大家指正，共同進步。

本文版權歸作者所有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出, 如有問題， 可郵件（[email protected]）咨詢。