js點擊下一張圖片_如何用js實現點擊圖片切換另一圖片再次點擊恢復

⑴ 怎麼樣使用js製作點擊圖片下一張效果急求！！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<script type="text/javascript">
var myimg=new Array("a2","a3","a4");
var i=0
function next(obj)
{
obj.src=myimg[i]+".jpg";
i++;
}
</script>
</head><body>
<img src="a1.jpg" onclick="next(this)"/>
</body>
</html>

⑵ JS實現點擊一個按鈕更換圖片

你的代碼差在少了"選擇元素"這一步。

img1.src = "..images/DT2.JPG"這一步是沒有作用的，因為img1你還沒有定義。

正確的方法是讓圖片元素的id是img1，然後

document.getElementById('img1').src = "..images/DT2.JPG"

這樣進行賦值。

document.getElementById('img1')這一步的作用就是選擇圖片元素。

這是針對此問題的測試頁面

代碼如下

<div>

<img id="img1" src="https://img.alicdn.com/bao/uploaded/i3/2276233074/TB20r1QbFXXXXX3XXXXXXXXXXXX_!!2276233074.jpg_270x270.jpg"

</div>

</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"

}

⑶ javascript 最後一張圖片點擊下一張就自動切換到下一頁

把圖片名字設置成一樣的名字+（1-10）的編號+".jpg" 放在當前目錄
<table><tr><td>><label onclick="PriImg()">上一張</label></td>><td><img id="imgid" src="img1.jpg" width="200" height="200" /></td><td><label onclick="NextImg()">下一張</label></td></tr></table>
function NextImg(){
var img=document.getElementById(「imgid」);
var nowImg=1;
nowImg+=1;
if(nowImg<=10){
img.src=mowImg+".jpg";
}
}
function PriImg(){
var img=document.getElementById(「imgid」);
var nowImg=1;
nowImg+=1;
if(nowImg>=1){
img.src=mowImg+".jpg";
}
}

⑷ 如何用js實現點擊圖片切換另一圖片，再次點擊恢復

<script>
function change_pic(){
var imgObj = document.getElementById("caocao_pic");
var Flag=(imgObj.getAttribute("src",2)=="images/caocao.png")
imgObj.src=Flag?"images/diaochan.png":"images/caocao.png";
}
</script>
<img src="images/caocao.png" class="wujiang_pic_size" id="caocao_pic" onClick="change_pic()">

⑸ js點擊切箭頭到下一張圖片

這個很簡單，先給div設置超出部分隱藏，然後，點擊事件中動態設置img的位置，負值。

⑹ 如何用js實現點擊一張圖片在旁邊顯示另一張圖片，再點擊一下，顯示的

給按鈕寫一個空class，給圖片預備一個class(fade)-display:none;綁定點擊事件toggle該class，判斷this是否有該class對圖片進行toggle(fade);

⑺ js怎麼實現點擊圖片左邊跳轉前一張點擊右邊跳轉下一張

思路：可以使用css sprite方法，將一副圖片分割成兩半，然後拼接成一幅圖片。

這樣看起來是一幅，其實是兩幅，給其定義不同的事件，基本上能達到你要求的結果。

⑻ 如何用javascript實現三張以上的圖片在點擊圖片時切換到下一張，我是初學者，希望用數組和循環實現求代碼

<script type="text/javascript">
window.onload = function() {
// 圖片地址數組
var image_urls = ["first.jpg", "second.jpg", "third.jpg", "fourth.jpg"];
// 初始化數組鍵值 (0 = 第一個圖片)
var idx = 0;

// 點擊 id 為 img 的圖片
document.getElementById("img").onclick = function() {
// idx + 1，如果為最後一張，還原回第一張
idx = idx === image_urls.length - 1 ? 0 : idx + 1;
// 設置 src
this.src = image_urls[idx];
// 測試
alert(this.src);
};
};
</script>

<img id="img" src="first.jpg" />

上面代碼只用了一個 img，點擊更換地址。

還是你想全部隱藏（除當前圖片），點擊後顯示下一張？

⑼ 3張圖片，javascript實現點擊圖片更換下一張

js代碼：
function changeImg(num){
var img = document.getElementById('img_box').getElementsByTagName('img');
for(i=0;i<=img.length;i++){
if(i==num+1) img[i].style.display="inline";
else img[i].style.display="none";
if(num==3) img[0].style.display="inline"; //這里的數字3需要與下面html中的最後一個保持一致
}
}
html代碼：

<div id="img_box">
<img src="1.jpg" onclick="changeImg(0)" style="display:inline;"/>
<img src="2.jpg" onclick="changeImg(1)" style="display:none;" />
<img src="3.jpg" onclick="changeImg(2)" style="display:none;" />
<img src="4.jpg" onclick="changeImg(3)" style="display:none;" />
</div>

⑽ 3張圖片,javascript實現點擊圖片更換下一張，能執行但是chrome報錯，如何完善

你的for循環的<=改成<就好了，不過建議換成這樣
<div id="img_box">
<img src="" style="display:inline;"/>
<img src="" style="display:none;" />
<img src="" style="display:none;" />
<img src="" style="display:none;" />
</div>
document.querySelector("#img_box").onclick=(e)=>{
e.target.style.display="none"
if (e.target.nextElementSibling) {
e.target.nextElementSibling.style.display="inline"
}else{
document.querySelector("#img_box img").style.display="inline"
}
}

導航:首頁 > 編程語言 > js點擊下一張圖片

js點擊下一張圖片

與js點擊下一張圖片相關的資料

友情鏈接