javascript - js/jquery : How to randomize images

标签 javascript jquery html image random

我有一个脚本,每次倒计时达到 0 时都会替换图像。尽管我想知道是否可能以及如何实现,但我可以让这些图像(我只是按顺序列出)在每次页面时随机化刷新等。

这里是所有代码(图像位于“//Fill in images in this array”之前):

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

最佳答案

替换

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

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

关于javascript - js/jquery : How to randomize images,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16117472/

相关文章:

javascript - jQuery 序列化问题

javascript - 如何将发布请求发送到 Rails 操作

Javascript如何获取嵌套在数组内的数组的长度,即在对象内?

java - 根据ajax请求重定向到登录页面

javascript - 将 html 表单值视为 JavaScript 语句

javascript - NodeJS 这个引用

jquery - 在jquery中滑动div

javascript - 自动播放和循环播放一系列视频,并随每个视频更改 CSS

html - 电子邮件 : Gmail change my text in link

javascript - jQuery - 检测是否已选择 HTML 选择选项的事件处理程序