Jquery image blur effect with in a div?
Consider i have three images and one bannerDiv.... On initial page load i should show the first image and after sometimeout say 300ms i must show the second image and vise versa....
I have to blur the first image and show second image .... Any suggestion how it can be done with jquery...
<div Id="BannerDiv">
<img src="mylocation" alt="image1"/>
<img src="mylocation" alt="image2"/>
<img src="mylocation" alt="image3"/>
</div>
and my jquery function is,
<script type="text/javascript">
$(document).ready(function() {
//how to show first image and blur it to show second image after 300 ms
});
</script>
EDIT:
1st image to fade out after 300ms and show 2nd image
300ms and show 3rd image
3rd image to fade out after 300ms and show 1st image....
Second EDIT:
I used nick's but nothing happening..
<body>
<form id="form1" runat="server">
<div>
<div Id="BannerDiv">
<img src="Images/banner3.jpg" alt="image1" width="954" height="327"/>
<img src="Images/ban_main_25.jpg" alt="image2" width="954" height="327"/>
<img src="Images/banner_25.jpg" alt="image3" width="954" height="327"/>
</div>
</div>
<script type="text/javascript">
$(function() {
$('#BannerDiv > :first').show();
setTimeout(rotate, 1000);
});
function rotate() {
var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {开发者_如何学JAVA
setTimeout(rotate, 300);
}).next().css({ 'z-index': 1 }).show();
if (c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
</script>
</form>
</body>
And css
#BannerDiv {width: 954px; height: 327px;}
#BannerDiv img {position: absolute; width: 954px; height: 327px; display: none;}
Here's a quick way to do it:
$(function() {
$('#BannerDiv > :first').show();
setTimeout(rotate, 1000);
});
function rotate() {
var c = $('#BannerDiv > :visible').css({ 'z-index': 2 }).fadeOut(2000, function() {
setTimeout(rotate, 3000);
}).next().css({ 'z-index': 1 }).show();
if(c.length == 0) $('#BannerDiv > :first').css({ 'z-index': 1 }).show();
}
You'd need the following CSS to match (adjust dimensions to yours):
#BannerDiv {width: 400px; height: 200px;}
#BannerDiv img {position: absolute; width: 400px; height: 200px; display: none;}
Here's an example using colored divs, it would be the exact same when replaced with images like you want.
You can use setInterval() for a repeated timed action:
$(function() {
setInterval(300, cycle_images);
});
function cycle_images() {
var banner = $("#BannerDiv");
if (banner.is(":hidden")) {
banner.children().hide().end().show();
}
var images = banner.children("img");
var visible = images.filter(":visible");
var index = images.index(visible);
var next = (index + 1) % images.length;
visible.fadeOut(100, function() {
images[next].fadeIn(100);
});
}
As for whether to hide the banner and/or images with CSS (external or inline), my personal opinion is that it is generally better to do it this way because if you don't it can result in a noticeable flicker if the ready() event is delayed for any reason.
(function($){
$.fn.showdelay = function(){
var delay = 0;
return this.each(function(){
$(this).delay(delay).fadeIn(100);
delay += 300;
});
};
})(jQuery);
Usage: $("#BannerDiv").children().showdelay();
maybe a little more elegant.
加载中,请稍侯......
精彩评论