Jquery image slideshow random display of images

2019-05-21 07:47发布

站内问答 / jQuery
903 3 6

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 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!!

3条回答
Anthone
2楼-- · 2019-05-21 08:09

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>
查看更多
0人赞 添加讨论(0) 举报
做个烂人
3楼-- · 2019-05-21 08:10

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>
查看更多
0人赞 添加讨论(0) 举报
一夜七次
4楼-- · 2019-05-21 08:10

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
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)