導航:首頁 > 圖片大全 > 如何用js實現點擊圖片時換圖片
如何用js實現點擊圖片時換圖片
發布時間：2024-10-20 19:30:36❶ JS實現點擊一個按鈕更換圖片
你的代碼差在少了"選擇元素"這一步。
img1.src = "..images/DT2.JPG"這一步是沒有作用的，因為img1你還沒有定義。
正確的方法是讓圖片元素的id是img1，然後
document.getElementById('img1').src = "..images/DT2.JPG"
這樣進行賦值。
document.getElementById('img1')這一步的作用就是選擇圖片元素。
這是針對此問題的測試頁面
代碼如下
<div class="DT">
<div>
<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
/>
</div>
</div>
<div style="text-align:center">
<input type="button" id="b1" value=" 放大 " onclick="fd();" />
<input type="button" id="b3" value="還原 " onclick="hy();" />
<input type="button" id="b2" value=" 縮小 " onclick="sx();" />
</div>
function fd() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_400x400.jpg"
}
function sx() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_180x180.jpg"
}
function hy() {
document.getElementById('img1').src = "https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"
}
❷ 如何用js實現點擊圖片切換另一圖片，再次點擊恢復
方法如下
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title></title>
</head>
<body>
<script>
window.onload=function(){
varImgbtn=document.getElementById('btn');
varImg=document.getElementById('img');
Imgbtn.onclick=function(){
if(Img.src=='http://dl.bi.sogou.com/images/2012/01/19/191337.png'){
Img.src='http://pic3.nipic.com/20090701/2847972_130628068_2.jpg';
}else{
Img.src='http://dl.bi.sogou.com/images/2012/01/19/191337.png'
}
}
}
</script>
<divid="bg">
<divid="btn">
<divid="txt">試客小兵</div>
<imgid="img"src="http://dl.bi.sogou.com/images/2012/01/19/191337.png">
</div>
</div>
</body>
</html>
Javascript被歸類為直譯語言，因為主流的引擎都是每次運行時載入代碼並解譯。V8是將所有代碼解譯後再開始運行，其他引擎則是逐行解譯（SpiderMonkey會將解譯過的指令暫存，以提高性能，稱為實時編譯），但由於V8的核心部份多數用Javascript撰寫（而SpiderMonkey是用C++），因此在不同的測試上，兩者性能互有優劣。
與其相對應的是編譯語言，例如C語言，以編譯語言編寫的程序在運行之前，必須經過編譯，將代碼編譯為機器碼，再加以運行。
❸ HTML怎麼設置點擊一張圖片換一張圖片
需要准備的材料分別有：電腦、瀏覽器、html編輯器。
1、首先，打開html編輯器，新建html文件，例如：index.html，編寫問題基礎代碼。
與如何用js實現點擊圖片時換圖片相關的資料
- 抖音如何做圖片更好看
- 諸葛亮q版圖片大全
- 用手機如何製作鏤空圖片
- 如何將手機圖片變為jpg格式
- 如何把一個圖片變成鏡像
- 龔玥菲動態圖片大全
- 蒙古頭飾圖片大全圖片
- 如何讓圖片按路徑順序彈出
- word文檔中如何插入圖片
- 如何將word圖片旋轉
- 越獄人物介紹圖片大全
- 八幅圖片如何才能把它拼到一起
- 風景樹圖片大全及名稱
- 淘寶如何評價曬圖返現模板圖片
- 圖片播放如何播慢
- 有圖片如何知道人物名字
- 拍照如何把橫屏的圖片調成豎屏
- 如何把圖片變成帶音樂的視頻
- 電腦上如何將圖片放入u盤
- 堆糖美甲圖片大全
- 愛筆思畫如何在圖層導入圖片
- 如何做水果圖片
- 如何開心度過明天圖片
- 如何給客戶發產品圖片
- 如何打理圖片上的水印
- wps如何摳取圖片帶字印章
- 微信如何同時分享多個圖片
- ppt如何用線條裁剪圖片
- 照相機動態圖片如何拍
- 如何把圖片處理成光線效果
- wps如何摳下圖片上手寫的文字
- 如何將圖片裁剪並拼接
- 金龍品種鑒別圖片大全
- 如何看待盲人健康教案圖片
- 超輕粘土蜘蛛圖片大全
- 如何在圖片中加上文字的背景
- 手機如何圖片識物
- 藝術果盤圖片大全
- 如何用圖片做手機殼
- 如何能從頭條上發圖片
- 汽車廣告圖片大全
- 如何把wps多張圖片調成統一大小