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>