生活随笔
收集整理的這篇文章主要介紹了
点击按钮切换图片
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
點(diǎn)擊按鈕時將當(dāng)前顯示的圖片切換為指定要顯示的圖片
效果圖演示
未點(diǎn)擊更換圖片之前顯示的圖片
點(diǎn)擊更換圖片之后
程序詳解：
準(zhǔn)備兩張互相切換的圖片給更換圖片按鈕添加點(diǎn)擊事件把兩張圖片放在一個數(shù)組里點(diǎn)擊按鈕后執(zhí)行判斷如果是第一張圖片就換成第二張，如果是第二張圖片就換成第一張
代碼演示
注意：
我的兩個圖片命名為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
>
了解過程之后也快去試試吧！！！
總結(jié)
以上是生活随笔為你收集整理的点击按钮切换图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
