在HTML中用css如何實現圖片切換？

步驟:

1

首先創建一個HTML文件（本人是使用HBuilder工具，你喜歡用什么就用什么）。

2

然后在html的body下創建一個div.這樣比較好結合css完成簡單布局和樣式。

3

接下來在該div下創建一個按鈕和一個img.然后設置圖片的寬高的初始圖片。

4

然后我們添加css代碼，簡單完成div的樣式。包括邊框樣式，大小，內容居中。

5

然后我們添加js代碼，讓點擊下一張的時候生效。要用到javascript的點擊事件，這要用onclick屬性，onclick的值就是js中的方法。

因為目標是改變img，所以給img標簽加上id

6

在html中添加javascript的值，主要是完成changeImg()方法。changeImg方法主要是改變img標簽中src的值，從而起到變換圖片的作用。

添加了下面的js的內容之后，點擊下一張圖片就會發生更改了。

7

但是上面的代碼到最后一張的時候就會停止，不會跳到最后一張，所以還要加下面的代碼才會完成從尾到首的切換，這樣一直點都能變換圖片，不會有停止了