jquery圖像變化

Question

我一直在做這項工作有一些麻煩，我需要創建一個連續三個圖像和一個按鈕，將所有三個圖像更改爲其他圖像的HTML頁面，並再次按下按鈕時圖像從頭開始切換回前三張圖像。

Answer 1

您應該將所有圖像加載到兩個div元素中，默認隱藏其中一個元素，然後切換顯示哪個div以及何時按下該按鈕時隱藏哪個div。 jQuery點擊函數可以檢測按鈕被點擊的時間，jQuery切換函數可以切換顯示/隱藏狀態。

$(document).ready(function(){ 
 
\t $('#imageSet2').hide(); 
 
}) 
 

 
$('#imageSetBtn').click(function(){ 
 
\t $('#imageSet1').toggle(); 
 
\t $('#imageSet2').toggle(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="imageSetBtn" type="button">Switch</button> 
 

 
<div id="imageSet1"> 
 
\t <img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png?mmfb=a5234ae3c4265f687c7fffae2760a907"> 
 
</div> 
 

 
<div id="imageSet2"> 
 
\t <img src="https://www.mozilla.org/media/img/firefox/template/header-logo-inverse.510f97e92635.png"> 
 
</div>