[英]How to show image randomly with fade-in fade-out using jquery?
This is HTML Code. 这是HTML代码。
<div id="Slogan">
<h1>
<img src="img1.gif" />
<img src="img2.gif" />
<img src="img3.gif" />
<img src="img4.gif" />
<img src="img5.gif" />
</h1>
</div>
#slogan {float:left;position:relative;width:100%;}
I want show all image randomly but one by one like slide show, with fade-in fade-out effect. 我想随机显示所有图像,但要像幻灯片一样一张一张地显示,并带有淡入淡出效果。 How to do with jquery? jQuery怎么办?
I need lightest possible way. 我需要最轻巧的方法。
// Define a random integer function
function random( n ){
return Math.floor( Math.random() * n );
}
// Define some variables, hide all images and show just one of them.
var transition_time = 500;
var waiting_time = 500;
var images = $('div#Slogan img');
var n = images.length;
var current = random( n );
images.hide();
images.eq( current ).show();
// Periodically, we fadeOut the current image and fadeIn a random one
var interval_id = setInterval( function(){
images.eq( current ).fadeOut( transition_time, function(){
current = random( n );
images.eq( current ).fadeIn( transition_time );
} );
}, 2 * transition_time + waiting_time);
// You can then stop the effect with:
// clearInterval( interval_id );
So there's a really cool plugin that may (or may not, depending on how light you want it) do exactly what you want, it's called Nivo Slider , it has a load of different transitions but on my website I choose to use the fade in fade out, it's very customisable 因此,有一个非常酷的插件可以(也可以不取决于您想要的光线)完全满足您的要求,它被称为Nivo Slider ,它具有许多不同的过渡效果,但是在我的网站上,我选择使用“淡入”淡出,非常可定制
您是否尝试过使用jQuery Cycle插件 ?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.