如何使用上一個和下一個按鈕切換src和onclick？

Question

你好我正在一個遊戲粉絲指南頁面上工作，但現在我不會再去尋找幫助。

我需要一種方式來獲得點擊之前的箭頭，箭頭旁邊的下或/和以前的IMG。

這一切都是新的，我和我有很多的測試，但沒有有工作，我希望有人可以幫助我。

現在我已經看到我的HTML有使伊蘇斯但我有修復，現在我可以張貼我的HTML。

我有更好的視野分裂的CSS樣式和HTML，但在我的HTML它是全部在一個和視窗元。

編輯：SRY基因，但我已經做出錯誤思維。改變圖片是不夠的，我不得不改變wohle div的內容。

explane單擊下一步必須改變DIV ID = 「卡1」 級= 「card_content」 到div的ID = 「卡2」 級= 「card_content」

a img { 
 
    border:none; 
 
} 
 

 
.card_overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index: 1001; 
 
} 
 

 
.card_content { 
 
    display: none; 
 
    position: absolute; 
 
    height:600px; 
 
    width:305px; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin-top: -258px; 
 
    margin-left: -156px; 
 
    padding: 6px; 
 
    background-color: black; 
 
    z-index: 1002; 
 
    overflow: auto; 
 
} 
 

 
#card_icons { 
 
    width:299px; 
 
    border:0; 
 
} 
 

 
.card_case { 
 
    background-image: url(http://file2.npage.de/014720/85/bilder/case.png); 
 
    background-repeat: no-repeat; 
 
    height:435px; 
 
    width:299px; 
 
    border:0; 
 
} 
 

 
.switch_card { 
 
position:relative; 
 
z-index:1003; 
 
margin-top:-235px; 
 
margin-left:-5px; 
 
} 
 

 
#back_to { 
 
position:relative; 
 
z-index:1003; 
 
margin-top:203px; 
 
margin-left:0px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
    <a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/grabwaechters_vasall.png" title="Grabwächters Vasall" /></a> 
 
    <a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='block';document.getElementById('fade').style.display='block'"><img src="http://file2.npage.de/014720/85/bilder/des_kaenguru.png" title="Grabwächters Vasall" /></a> 
 
    </td> 
 
    </tr> 
 
</table> 
 

 

 

 

 
<div id="card1" class="card_content"> 
 
    <table id="card_icons"> 
 
    <tr> 
 
    <td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td> 
 
    <td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td> 
 
    <td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td> 
 
    </tr> 
 
    </table> 
 
    <table class="card_case"> 
 
    <tr> 
 
    <td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_grabwaechters_vasall.png"></td> 
 
    </tr> 
 
    </table> 
 

 
    <div class="switch_card"> 
 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     <td align="left"><a href="previous card"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></a></td> 
 
     <td>&nbsp;</td> 
 
     <td align="right"><a href="next card"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></a></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="back_to"><a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a></div> 
 
</div> 
 

 
<div id="card2" class="card_content"> 
 
    <table id="card_icons"> 
 
    <tr> 
 
    <td align="left" width="80"><img src="http://file2.npage.de/014720/85/bilder/stapel.png" height="17" width="24"><font color="white"> 1/20</font></td> 
 
    <td align="left" width="60"><img src="http://file2.npage.de/014720/85/bilder/ex.png" height="17" width="14"><font color="white"> 0/ 2</font></td> 
 
    <td align="right"><img src="http://file2.npage.de/014720/85/bilder/ur.png"></td> 
 
    </tr> 
 
    </table> 
 
    <table class="card_case"> 
 
    <tr> 
 
    <td valign="middle" align="center"><img src="http://file2.npage.de/014720/85/bilder/big_des_kaenguru.png"> 
 
    </td> 
 
    </tr> 
 
    </table> 
 

 
    <div class="switch_card"> 
 
     <table width="100%" border="0" cellpadding="0" cellspacing="0"> 
 
     <tr> 
 
     <td align="left"><a href="previous card"><img src="http://file2.npage.de/014720/85/bilder/links2.png"></a></td> 
 
     <td>&nbsp;</td> 
 
     <td align="right"><a href="next card"><img src="http://file2.npage.de/014720/85/bilder/rechts2.png"></a></td> 
 
     </tr> 
 
     </table> 
 
    </div> 
 

 
    <div id="back_to"><a href="javascript:void(0)" onclick="document.getElementById('card2').style.display='none';document.getElementById('fade').style.display='none'" unselectable="off"><img src="http://file2.npage.de/014720/85/bilder/back.png" title="zurück" /></a></div> 
 
</div> 
 

 

 
<div id="fade" class="card_overlay"></div>

Answer 1

下面的代碼可以幫助你。

// index.html 
<img src="01.png" id="pic"> 

// script.js 
document.getElementById("pic").setAttribute("src", "02.png") 

Answer 2

了它與

<a href="javascript:void(0)" onclick="document.getElementById('card1').style.display='non‌​e';document.getEleme‌​ntById('fade').style‌​.display='none';docu‌​ment.getElementById(‌​'card2').style.displ‌​ay='block';document.‌​getElementById('fade‌​').style.display='bl‌​ock'" unselectable="off">

完成，但如何使JavaScript的：用的script.js無效