0

我有一个脚本，每次倒计时达到 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>
4

2 回答 2

2

代替

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

和

this.current = Math.floor(Math.random() * this.images.length);
于 2013-04-20T06:36:39.070 回答
0

您可以使用该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];
};
于 2013-04-20T07:10:42.390 回答