1

I have a page which contains 15 div elements. I need to populate each div with a random image from an array of at least 36 images. I then need to have the images rotate at random intervals. I have this part working with a solution provided in Choose image URL from large array, insert into random DIV on page, cycle.

I would like to improve on the code so that images are not allowed to be called from the array if they are already being displayed on the page. This is what I'm stuck on.

This is my code so far.

function random_int(max) {
            return Math.floor(Math.random() * max);
        }

        $(document).ready(function() {
            var images = ['http://placekitten.com/159/159', 'http://placekitten.com/160/160', 'http://placekitten.com/161/161', 'http://placekitten.com/162/162', 'http://placekitten.com/163/163', 'http://placekitten.com/164/164', 'http://placekitten.com/165/165', 'http://placekitten.com/166/166', 'http://placekitten.com/167/167', 'http://placekitten.com/168/168', 'http://placekitten.com/169/169', 'http://placekitten.com/170/170', 'http://placekitten.com/171/171', 'http://placekitten.com/172/172', 'http://placekitten.com/173/173', 'http://placekitten.com/174/174', 'http://placekitten.com/175/175', 'http://placekitten.com/176/176', 'http://placekitten.com/177/177', 'http://placekitten.com/178/178', 'http://placekitten.com/179/179'];
            var $divs = $('div.projectItem');

            $divs.each(function() {
                $('<img width="100%" />', {
                    src: 'http://placekitten.com/180/180',
                    alt: this.id
                }).appendTo(this);
            });

            function switchImage() {
                var $div = $divs.eq(random_int($divs.length));
                var image = images[random_int(images.length)];

                $div.find('img').attr('src', image);
            }

            var imageChanger = setInterval(switchImage, 500);
        });

I have created a JSfiddle example.

One other thing I would like to achieve is to have an image in each div when the page first loads. You will notice in the jsfiddle example that the divs are empty and can stay that way for some time after the page has loaded. I have tried including an initial img tag in each div but when the random images are loaded, they do not replace the initial images and each div ends up with two images in it. I believe this is because of the .appendTo(this);. I think I have to change this to replaceChild or similar?

Any assistance appreciated by a first-time poster and JS beginner.

4

1 回答 1

0

每次添加时只需从数组中删除图像。
替换图像后，不要忘记将图像从 IMG 标签推送到数组中。

像这样的东西：

function random_int(max) {
    return Math.floor(Math.random() * max);
}

$(document).ready(function() {
    var images = ['http://placekitten.com/159/159', 'http://placekitten.com/160/160', 'http://placekitten.com/161/161', 'http://placekitten.com/162/162', 'http://placekitten.com/163/163', 'http://placekitten.com/164/164', 'http://placekitten.com/165/165', 'http://placekitten.com/166/166', 'http://placekitten.com/167/167', 'http://placekitten.com/168/168', 'http://placekitten.com/169/169', 'http://placekitten.com/170/170', 'http://placekitten.com/171/171', 'http://placekitten.com/172/172', 'http://placekitten.com/173/173', 'http://placekitten.com/174/174', 'http://placekitten.com/175/175', 'http://placekitten.com/176/176', 'http://placekitten.com/177/177', 'http://placekitten.com/178/178', 'http://placekitten.com/179/179'];
    var $divs = $('div.projectItem');

    $divs.each(function() {
        $('<img width="100%" />', {
            src: 'http://placekitten.com/180/180',
            alt: this.id
        }).appendTo(this);
    });

    function switchImage() {
        var $div = $divs.eq(random_int($divs.length));
        var image_i = random_int(images.length);
        var image = images[image_i];
        var $img = $div.find('img');

        images.splice(images_i,1);
        images.push($img.attr("src"));

        $img.attr('src', image);
    }

    var imageChanger = setInterval(switchImage, 500);
});

祝你好运。

于 2013-11-03T13:05:57.207 回答