原生JS實現(xiàn)隱藏顯示圖片 JS實現(xiàn)點擊切換圖片效果
更新時間：2021年08月25日 09:30:21 作者：ITandYT
這篇文章主要為大家詳細介紹了原生JS實現(xiàn)隱藏顯示圖片，JS實現(xiàn)點擊切換圖片效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
今天要說的內(nèi)容,看標題就都能知道了，所有知識點一覽無遺啊，!咱們今天的東西，是純純的原生JS代碼。
我先說一下要求：
1.有兩個按鈕,內(nèi)容為顯示,和換,
2.當點擊顯示的時候,按鈕文字變成隱藏,同時圖片顯示出來,同理,當點擊隱藏的時候,按鈕文字變成顯示,圖片隱藏起來
3.當點擊換的時候,圖片會變成另外一張,當再次點擊的時候,圖片又會變回來,
4.當圖片隱藏的時候,圖片不可變換
這就是要求,下面來看代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>換圖片</title>
</head>
<body>
<button id="btn">隱藏</button>
<button id="btu">換</button>
<img src="11.jpg" id="img" width="300px" />
</body>
<script>
var btn = document.getElementById("btn");
var btu = document.getElementById("btu");
var img = document.getElementById("img");
var xia = 0;
btn.addEventListener("click",function (){
//判斷按鈕文字內(nèi)容
if(btn.innerText == "隱藏"){
//當按鈕文字為隱藏時,圖片隱藏
img.style.opacity = 0;
//同時,按鈕文字變成現(xiàn)實 下面同理
btn.innerText = "顯示";
}else{
img.style.opacity = 1;
btn.innerText = "隱藏";
}
});
var imgs = ["11.jpg","12.jpg"];
//給"換"添加點擊事件
btu.addEventListener("click",function (){
if(btn.innerText == "隱藏"){
if(xia < 1){
xia++;
}else{
xia = 0;
}
img.src = imgs[xia];
}else{
alert("圖片隱藏，不能切換");
}
});
</script>
</html>
就是這么簡單，你們學會了嗎 ？
相關文章
event.X和event.clientX的區(qū)別分析
解釋一下event.X和event.clientX有什么區(qū)別？event.clientX返回事件發(fā)生時,mouse相對于客戶窗口的X坐標 event.X也一樣但是如果設置事件對象的定位屬性值為relative2011-10-10
JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法
這篇文章主要介紹了JavaScript實現(xiàn)同步于本地時間的動態(tài)時間顯示方法,實例分析了javascript獲取本地時間及動態(tài)顯示的技巧,并對實現(xiàn)代碼進行了較為詳盡的分析說明,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了解決WordPress使用CDN后博文無法評論的錯誤的方法,同時提醒注意WordPress使用版本的jQuery版本支持度,需要的朋友可以參考下2015-12-12
這篇文章主要為大家詳細介紹了JS實現(xiàn)可以用鍵盤方向鍵控制的動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
JSON （JavaScript Object Notation）一種簡單的數(shù)據(jù)格式，比xml更輕巧，下面通過本文給大家介紹JS中Eval解析JSON字符串的一個小問題，需要的朋友參考下吧2016-02-02
實例分析js類中的公有和私有變量2008-07-07
javascript dom追加內(nèi)容實現(xiàn)示例
javascript dom追加內(nèi)容的使用還是比較廣泛的，在本文將為大家介紹下具體的使用方法，感興趣的朋友可以參考下2013-09-09
微信小程序canvas繪制圓角base64圖片的實現(xiàn)
這篇文章主要介紹了微信小程序canvas繪制圓角base64圖片的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了微信小程序和百度的語音識別接口詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05![this[] 指的是什么內(nèi)容 討論](http://img.jbzj.com/images/xgimg/bcimg9.png)
this[] 指的是什么內(nèi)容 討論...2007-03-03