使用javascript onclick更改图像源并生效 [英] change image source using javascript onclick with effect
问题描述
我想用javascript更改图像的来源，以及诸如fadout()之类的效果.但是我需要更改多个图像的来源，比如说3张图像，具有褪色效果或任何其他效果..如何?以下是我正在使用的代码，但仅用于2张图像，如何用于多张图像:
I want to change the source of image with javascript,along with some effect like fadeout() or something like that.But I need to change source for more than one image,say 3 images,with fade effect or any other effect.HOW?? Below is the code i'm using but its only for 2 images how do i use for multiple images:
<!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()循环淡出，淡入< .frame 容器
Try utilizing .fadeToggle() , .prependTo(), .show() to cycle effect of fading out, fading in img elements within .frame container
$(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 onclick更改图像源并生效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
