这是 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%;}
我想随机显示所有图像,但像幻灯片放映一样一张一张地显示,具有淡入淡出效果。如何使用 jquery?
我需要最轻的方法。
最佳答案
// 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 );
关于javascript - 如何使用 jquery 以淡入淡出的方式随机显示图像?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3511357/