jQuery 使用jquery在图像之间转换
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8104890/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
using jquery to transition between images
提问by Anthony
I have two images that are of same size and text but different colors (they are used as logos). I would like to slowly automatically transition between the two images using jQuery. First, I was going to make a GIF image out of the two images but then thought that perhaps jQuery can be used.
我有两个大小和文本相同但颜色不同的图像（它们用作徽标）。我想使用 jQuery 在两个图像之间慢慢自动转换。首先，我打算从两个图像中制作一个 GIF 图像，但后来认为也许可以使用 jQuery。
Is this possible with jQuery?
这可以用 jQuery 实现吗？
I want the transition to happen without any input from the user and it can happen every X seconds.
我希望转换在没有用户输入的情况下发生，并且可以每 X 秒发生一次。
Please let me know how this can be done.
请让我知道如何做到这一点。
采纳答案by Praveen Gowda I V
I think this would definitely help
我认为这肯定会有所帮助
http://addyosmani.com/blog/css3transitions-jquery/
http://addyosmani.com/blog/css3transitions-jquery/
also this
还有这个
http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html
http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html
here is a jquery plugin for this
这是一个 jquery 插件
回答by dnuttle
Yes, you can put the new image on top of the current one, using absolute positioning, then use fadeTo to fade in the new image. You can use a simple setInterval to make this happen periodically.
是的，您可以将新图像放在当前图像的顶部，使用绝对定位，然后使用淡入淡出新图像。您可以使用简单的 setInterval 来定期执行此操作。
EDIT: fadeTo lets you go to a specific level of transparency. Easier just to use fadeIn, which will go from 100% to 0% transparency.
编辑：fadeTo 可让您进入特定级别的透明度。使用淡入淡出更容易，它会从 100% 到 0% 的透明度。
回答by David Marx
I found this solution to be simple and suited my needs.
我发现这个解决方案很简单并且适合我的需求。
The gist of it is:
它的要点是：
- Put all of the images you want to transition between in the same div.
- Set the class of one of them to something like "active"
- In the css, hide all of the images that don't have the class set to "active"
- User jquery selectors to grab the current "active" element, unclass it, and set the next (or first) image element in the div to the "active class. Use jquery fadeOut and fadeIn to handle the transitions.
- Use setInterval to handle the cycle timing.
- 将您要在其间转换的所有图像放在同一个 div 中。
- 将其中一个的类设置为“活动”之类的东西
- 在 css 中，隐藏所有没有将类设置为“活动”的图像
- 用户 jquery 选择器获取当前的“活动”元素，取消分类，并将 div 中的下一个（或第一个）图像元素设置为“活动类。使用 jquery 淡出和淡入来处理转换。
- 使用 setInterval 来处理循环计时。
Via: http://jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html
通过：http: //jquery-howto.blogspot.com/2009/05/replacing-images-at-time-intervals.html
<html>
<head>
<script src="jquery.js">
</script>
<script>
function swapImages(){
var $active = $('#myGallery .active');
var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
$active.fadeOut(function(){
$active.removeClass('active');
$next.fadeIn().addClass('active');
});
}
$(document).ready(function(){
// Run our swapImages() function every 5secs
setInterval('swapImages()', 5000);
}
</script>
<style>
#myGallery{
position:relative;
width:400px; /* Set your image width */
height:300px; /* Set your image height */
}
#myGallery img{
display:none;
position:absolute;
top:0;
left:0;
}
#myGallery img.active{
display:block;
}
</style>
</head>
<body>
<div id="myGallery">
<img src="image1.jpg" class="active" />
<img src="image2.jpg" />
<img src="image3.jpg" />
</div>
</body>
</html>
回答by Marcus
function fadeInAndOut() {$('#face').fadeIn(500).delay(500).fadeOut(500)}
setInterval(fadeInAndOut, 2000);<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="face" src="https://take-a-screenshot.org/secondary/img/about/face.jpg" style="display:none; position: absolute">
<img src="https://take-a-screenshot.org/secondary/img/about/blur.jpg">回答by Calvin
i have used this code. for my webside.
我用过这个代码。对于我的网页。
html
html
<div id="kop">
<img class="head" src="images/header_logo.png">
<img class="head" src="images/header_naam.png">
<img class="head" src="images/header_slogan.png">
</div>
css
css
#kop
{
position: absolute;
width: 620px;
height: 110px;
}
.head
{
position: absolute;
top: 15px;
left: 215px;
width: 620px;
height: 110px;
}
jquery
查询
$(document).ready(function(e) {
var delay = 3000,
fadeTime = 2000;
$('.head:gt(0)').hide();
setInterval(function(){
$(".head:first-child").fadeOut(fadeTime).next(".head").fadeIn(fadeTime).end().appendTo("#kop")
}, delay+fadeTime);
});
you might have to change some things but for me it works fine. for the jquery i had also help from here
你可能需要改变一些东西，但对我来说它工作正常。对于 jquery，我也从这里得到了帮助
