Jquery image slideshow random display of images
I am using a slide show from the link :
http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator . I need the first image to be 开发者_Go百科also a random one. I had given a same class for all the li like 'rand'.Then
var curr=$('div.rotator ul li.rand');
var rc= Math.floor(Math.random() * curr.length);
var current=$(curr[rc]);
But i am stuck with what to do next..plz help!!
You can randomize the order of your LI elements using this awesome JQuery shuffle plugin by James Padolsey.
I have used it on a project recently and it worked very well for my needs.
Plus, the source of it is very easy to read (therefore easier to understand).
http://james.padolsey.com/javascript/shuffling-the-dom/
To use this in the context of a slideshow, you could use JQuery Cycle plugin by Mark Alsup. Shuffle the dom first, then run the slideshow:
<script>
$(document).ready(function() {
$('.slideshow img').shuffle();
$('.slideshow').cycle({
fx: 'fade'
});
});
</script>
Here is another jQuery plugin that does the same ting:
http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html
Going off the demo that you gave that you can download here
http://www.alohatechsupport.net/downloads/image-rotator.zip
Make sure you follow these intstructions in the code
//Un-comment the 3 lines below to get the images in random order
var sibs = current.siblings();
var rndNum = Math.floor(Math.random() * sibs.length );
var next = $( sibs[ rndNum ] );
And then below your document ready section will look like:
$(document).ready(function() {
//Load the slideshow
$('div.rotator ul').shuffle();
theRotator();
$('div.rotator').fadeIn(1000);
$('div.rotator ul li').fadeIn(1000); // tweek for IE
});
The code you have used for your slideshow is too much. this can be done much simpler. Have a look a this example of a slideshow with random images: http://jsbin.com/iledo3/3
The code pasted here for reference:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
#slideshow-container { height:90px; position:relative; }
#slideshow-container img { position:absolute; left:0; top:0; width:100%; height:100% }
#slideshow { position:absolute; left:0; top:0; width:100%; height:100%; list-style:none }
#slideshow img { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 }
#slideshow { position:absolute; left:0; top:0; width:100%; height:100%; }
#slideshow img { width:120px; height:90px; background-repeat:none; background-position:top left; position:absolute; left:0; top:0 } /* adjust this for your images */
</style>
</head>
<body>
<div id="slideshow-container">
<div id="slideshow">
<img src="http://dummyimage.com/120x90/f00/fff.png&text=Image+1">
<img src="http://dummyimage.com/120x90/0f0/fff.png&text=Image+2">
<img src="http://dummyimage.com/120x90/00f/fff.png&text=Image+3">
<img src="http://dummyimage.com/120x90/ff0/000.png&text=Image+4">
<img src="http://dummyimage.com/120x90/0ff/fff.png&text=Image+5">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//extending jQuery with ':random' selector, best put into separate plugin js file
jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
random: function(a, i, m, r) {
if (i == 0) {
jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
};
return i == jQuery.jQueryRandom;
}
});
//end :random extend
$(function() {
$('#slideshow img').not(':random').hide(); //hide all images except one initially
setInterval(function(){
$('#slideshow img:visible').fadeOut('slow')
.siblings('img:random').fadeIn('slow') //find a random image
.end().appendTo('#slideshow');},
2000); //2 second interval
});
</script>
</body>
</html>
加载中,请稍侯......
精彩评论