Jquery图像更改

Question

我在制作这项工作时遇到了一些麻烦，我需要创建一个连续三个图像的html页面和一个将所有三个图像更改为其他图像的按钮，当再次按下该按钮时，图像会切换从头开始回到前三张图片。

Answer 1

您应该将所有图像加载到两个div元素中，默认情况下隐藏其中一个，然后切换显示哪个div以及每次按下按钮时隐藏哪个div。 jQuery单击功能可以检测单击按钮的时间，jQuery切换功能可以切换显示/隐藏状态。

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

$('#imageSetBtn').click(function(){
	$('#imageSet1').toggle();
	$('#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">
	<img src="https://www.google.com/chrome/assets/common/images/chrome_logo_2x.png?mmfb=a5234ae3c4265f687c7fffae2760a907">
</div>

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