Изменить фоновое изображение при перезагрузке

Question

Изменить фоновое изображение при перезагрузке

0

Я пытался изменить src элемента изображения при перезагрузке. Я придумал этот код, но он не работает для меня:

var images = ['hero-1.jpg', 'hero-2.jpg', 'hero-3.jpg', 'hero-4.jpg', 'hero-5.jpg', 'hero-6.jpg'];
$('#hero figure img[src="images/' + images[Math.floor(Math.random() * images.length)] + '"]').appendTo('#hero img');

HTML

<section id="hero">
    <figure>
        <img src="images/hero-1.jpg" alt="Hero">
    </figure><!-- End figure -->
</section><!-- End section#hero -->

Изображения размещаются внутри карты изображения непосредственно в корне.

Caspert 26 апр. 2014, в 23:41

Источник

0

Все 6 изображений на самом деле в разметке?
Matt Ball 26 апр. 2014, в 21:18
0

HTML-код имеет некоторые ошибки. Не могли бы вы их починить?
MaxArt 26 апр. 2014, в 21:20
0

Нет. Я использовал этот пример: briancray.com/posts/simple-image-randomizer-jquery @Mattball
Caspert 26 апр. 2014, в 21:20
0

Ну, это проблема. Код выбирает элементы, которых нет в DOM. Обратите внимание на разницу в шаге 2 между вашим кодом и исходным примером.
Matt Ball 26 апр. 2014, в 21:21
0

Ага, так что я должен установить изображения в DOM или я могу выбрать их другим способом через js?
Caspert 26 апр. 2014, в 21:22

Показать ещё 3 комментария

Теги:

javascript

html

1 ответ

Ещё вопросы

Все 6 изображений на самом деле в разметке?
HTML-код имеет некоторые ошибки. Не могли бы вы их починить?
Нет. Я использовал этот пример: briancray.com/posts/simple-image-randomizer-jquery @Mattball
Ну, это проблема. Код выбирает элементы, которых нет в DOM. Обратите внимание на разницу в шаге 2 между вашим кодом и исходным примером.
Ага, так что я должен установить изображения в DOM или я могу выбрать их другим способом через js?

Kjell Ivar · Answer 1 · 2014-04-26T19-26-00.000Z

Здесь небольшое AngularJS-приложение, которое делает то, что вы хотите: http://jsfiddle.net/HB7LU/3276/

Он содержит контроллер с массивом с URL-адресами img и функцию, которая возвращает случайный один из этих URL-адресов:

function MyCtrl($scope) {
    var images = [
        'http://placehold.it/200x200', 
        'http://placekitten.com/200/300', 
        'http://www.lorempixum.com/400/300'
    ];

    $scope.getRandomImage = function () {
        var randIndex = ~~(Math.random() * images.length);
        return images[randIndex];
    };
}

Это используется в выражении в html:

<img ng-src="{{getRandomImage()}}">

Здесь используется угловая директива ng-src, потому что ей не разрешено иметь угловые выражения в атрибуте src.

Может быть немного перебор, чтобы использовать угловые.