我想用 javascript 更改图像的来源，以及一些效果，如 fadeout() 或类似的东西。但我需要更改不止一张图像的来源，比如 3 张图像，具有淡入淡出效果或任何其他效果.怎么做？？ 下面是我正在使用的代码，但它仅适用于 2 张图像，我如何用于多张图像:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<script src="jquery-1.5.1.js"></script>
</head>
<style>
body{
background:url(big-image.jpg);
background-size:100% auto;
background-repeat:no-repeat;
}
#a{
width:15%;
height:25%;
position:static;
}
#b{
width:50%;
height:45%;
display:none;
left:10%;
}
</style>
<body>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<h2 align="center">
<img src="1.png" width="15%" height="31%" class="cat" id="a">
</h2>
<h3 align="center">
<img src="2.png" id="b" class="cat">
</h3>
</div>
<script type="text/javascript">
$(function(){
$("input:button").click(function(){
$(".cat").fadeToggle("slow");
});
});
</script>
</body>
</html>
最佳答案
yea,fade it and another image comes up...neednt be any classy effects,even simple fade or slide would do.Is there any demo available
ok,the result must be like an image carousel,on click it should keep fading in
尝试使用 .fadeToggle() , .prependTo() , .show()淡出、淡入的循环效果img .frame 中的元素容器
$(function() {
$("input:button").click(function() {
$("img:last").fadeToggle("slow", function() {
$(this).prependTo(".frame").show()
});
});
});.frame {
position: relative;
left: 35%;
width: 150px;
height: 150px;
}
img {
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>
<input type="button" value="Click here" />
</h1>
<div class="frame">
<img src="http://lorempixel.com/150/150/cats" />
<img src="http://lorempixel.com/150/150/technics" />
<img src="http://lorempixel.com/150/150/nature" />
<img src="http://lorempixel.com/150/150/animals" />
</div>关于javascript - 使用javascript onclick更改图像源效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31154225/