js / jquery：如何随机化图像

Question

我有一个脚本，每次倒计时到达 0 时都会替换一个图像。虽然我想知道这是否可能，以及如何让这些图像（我只是按顺序列出）在每次页面时随机化刷新等。

这里是所有代码（图片位于“//在这个数组中填充图片”之前）：

<div id="counter_2" class="counter">     
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript" charset="UTF-8"></script>
    <script src="js/jquery.countdown.js" type="text/javascript" charset="UTF-8"></script>
    <script type="text/javascript">
        <!-- The ready() function will force the browser to run wait running the javascript until the entire page has loaded -->
        $(document).ready(function() {
        // The jquery code for constructing and starting the counter
        // has been wrapped inside a function so we can call it whenever we want to
        function startCounter(imageLoader){
            $('#counter_2').countdown({
                 image: 'img/digits.png',
                 startTime: '00:10',
                 timerEnd: function(){ callback(imageLoader) },
                 format: 'mm:ss'
            })
        }
        // Takes care of whatever need to be done everytime
        function callback(imageLoader){
            // Replace image
            $('#image').attr('src', imageLoader.nextImage());
            $('#counter_2').empty(); // Clear the finished counter, so a new can be constructed in its place
            startCounter(imageLoader); // Construct a new counter and starts it
        }
        function ImageLoader(images){
            this.images = images;
            this.current = 0;                 
            this.nextImage = function(){
                this.current = (this.current+1) % this.images.length;
                return this.images[this.current];;
            }
        }
        // Fill in images in this array
        imageLoader = new ImageLoader(['img/wallpapers/2.jpg', 'img/wallpapers/3.jpg', 'img/wallpapers/4.jpg', 'img/wallpapers/5.jpg', 'img/wallpapers/6.jpg', 'img/wallpapers/7.jpg', 'img/wallpapers/9.jpg', 'img/wallpapers/10.jpg', 'img/wallpapers/11.jpg', 'img/wallpapers/12.jpg', 'img/wallpapers/13.jpg', 'img/wallpapers/14.jpg',  'img/wallpapers/15.jpg', 'img/wallpapers/16.jpg', 'img/wallpapers/17.jpg', 'img/wallpapers/18.jpg', 'img/wallpapers/19.jpg', 'img/wallpapers/20.jpg', 'img/wallpapers/21.jpg', 'img/wallpapers/22.jpg', 'img/wallpapers/23.jpg', 'img/wallpapers/24.jpg', 'img/wallpapers/25.jpg', 'img/wallpapers/26.jpg', 'img/wallpapers/27.jpg', 'img/wallpapers/28.jpg', 'img/wallpapers/29.jpg', 'img/wallpapers/30.jpg', 'img/wallpapers/31.jpg', 'img/wallpapers/32.jpg', 'img/wallpapers/33.jpg', 'img/wallpapers/34.jpg', 'img/wallpapers/35.jpg', 'img/wallpapers/36.jpg', 'img/wallpapers/37.jpg', 'img/wallpapers/38.jpg', 'img/wallpapers/39.jpg', 'img/wallpapers/40.jpg', 'img/wallpapers/41.jpg']);
        startCounter(imageLoader); // Set everything off! (Construct a new counter and starts it)
        });       
    </script>
<div id="middle_wallpaper-actual">              
            <img id="image" src="img/wallpapers/1.jpg" alt="wallpapers">                
          </div>

Answer 1

替换

this.current = (this.current+1) % this.images.length;

与

this.current = Math.floor(Math.random() * this.images.length);

Answer 2

您可以使用Math.random 函数来生成随机数。例如，要生成0 和9 之间的随机数，您可以执行以下操作：

var num = Math.floor(Math.random() * 10);

我已经实现了一个ImageLoader，它将返回随机图像并且在它们全部显示之前永远不会返回相同的图像。

http://jsfiddle.net/dUZSZ/2/

function ImageLoader(images) {
    this.images = images;
    this.usedIndexes = {};
    this.displayedCount = 0;
}

ImageLoader.prototype.nextImage = function () {
    var self = this,
        len = self.images.length,
        usedIndexes = self.usedIndexes,
        lastBatchIndex = self.lastBatchIndex,
        denyLastBatchIndex = self.displayedCount !== len - 1,
        index;

    if (this.displayedCount === len) {
        lastBatchIndex = self.lastBatchIndex = self.lastIndex;
        usedIndexes = self.usedIndexes = {};
        self.displayedCount = 0;
    }

    do {
        index = Math.floor(Math.random() * len);
    } while (usedIndexes[index] || (lastBatchIndex === index && denyLastBatchIndex));

    self.displayedCount++;
    usedIndexes[self.lastIndex = index] = true;

    return self.images[index];
};