生活随笔
收集整理的這篇文章主要介紹了
点击按钮切换图片
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
點擊按鈕時將當前顯示的圖片切換為指定要顯示的圖片
效果圖演示
未點擊更換圖片之前顯示的圖片
點擊更換圖片之后
程序詳解：
準備兩張互相切換的圖片給更換圖片按鈕添加點擊事件把兩張圖片放在一個數組里點擊按鈕后執行判斷如果是第一張圖片就換成第二張，如果是第二張圖片就換成第一張
代碼演示
注意：
我的兩個圖片命名為0.jpg和1.jpg
<!DOCTYPE html
>
<html
><head
><meta charset
="utf-8" /><title
></title
><style
>img
{width
: 150px
;height
: 130px
;}</style
></head
><body
><img src
="0.jpg" id
="imgShow"><input type
="button" value
="更換圖片" onclick
="changeImg()" /></body
><script
>var i
= 0;var imgs
=["1.jpg","0.jpg"];function
changeImg(){document
.getElementById("imgShow").src
=imgs
[i
];if(i
=0){i
=1}else{i
=0}}</script
>
</html
>
了解過程之后也快去試試吧！！！
總結
以上是生活随笔為你收集整理的点击按钮切换图片的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
