我想用 javascript 更改图像的源，以及一些效果，例如 fadeout() 或类似的效果。但是我需要更改多个图像的源，例如 3 个图像，具有淡入淡出效果或任何其他效果。HOW??下面是我正在使用的代码，但它仅适用于 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>
是的，淡化它，另一个图像出现...不需要任何优雅
效果，即使是简单的淡入淡出或幻灯片也可以。有可用的演示吗
好的，结果必须像图像轮播一样，单击它应该保留
淡入
尝试利用.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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
