开发者

Simple display random show

I have 5 picture (pic-1.jpg, pic-2.jpg... etc..) those 5 pic开发者_Python百科tures is loader into and array with text associated to the (caption) what i like to archive (with jquery or javascript) is : Get the order randomly each time the site is loaded, after hitting next, getting the next image without showing a one that have been show until the end.

I have think to use random to generate the first to display, and a push to get the other one

Do you have anothe better function... to random without repeat until show all once...

is it clear ?... i will explain more if need !


by searching 'javascript randomize array' i found a page about a fisherYates array shuffle algorithm: http://sedition.com/perl/javascript-fy.html

here's the relevant code:

function fisherYates ( myArray ) {
  var i = myArray.length;
  if ( i == 0 ) return false;
  while ( --i ) {
     var j = Math.floor( Math.random() * ( i + 1 ) );
     var tempi = myArray[i];
     var tempj = myArray[j];
     myArray[i] = tempj;
     myArray[j] = tempi;
   }
}

i've made a little example using it: http://www.jsfiddle.net/fftWg/


What comes to randomizing jQuery objects, please have a look at this answer I've given earlier. Maybe it helps otherwise as well — not sure if I really understand what you're after ;) — display galleria list of images in random order


The basic idea is to have a random array and pop from the top of it each time you do 'next' until you run out of array, then repeat.


Get your random number off of the array size. And each time you show an image remove that item from the array. After the array is empty, start over.


you mean something like this: Code:

function RandomSlider()
{
    var self      = this;
    this.pictures = new Array();
    this.timeout  = 2000; // wait 2000 ms
    this.aniTime  = "fast" or 1500;

    // generate a random number
    this.randomStart = function()
    {
        return Math.floor(Math.random() * self.pictures + 1);
    }

    this.SetAnimate = function(arrIndex)
    {
        setTimeout(function()
        {
            // do animation or what you want
            $(....).animate({ .... }, self.aniTime, 'linear', function()
            {
                // do stuff when you are done with animation

                if(arrIndex == self..pictures.length) 
                {
                    // when the random index is the last item in your case image 5 and array index 4
                    // then start over again, start with array index 0
                    self.SetAnimate(0);
                }
                else
                {
                    // set the next slider item ready
                    self.SetAnimate(arrIndex + 1);
                }
            });
        }, self.timeout);
    }

    this.StartSlider = function()
    {
        // start animation
        this.SetAnimate( this.randomStart() );
    }
}

Usage:

/

/ you can put in the array ID's classes attr urls all you want
    var picture_array = new Array();
    picture_array[0] = "image1";
    picture_array[1] = "image2";
    picture_array[2] = "image3";
    picture_array[3] = "image4";
    picture_array[4] = "image5";

    var slider = new RandomSlider();
    slider.pictures = picture_array;
    slider.StartSlider();
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜