Измените случайное фоновое изображение на другое случайное фоновое изображение (с переходом затухания)

Я пытаюсь создать веб-сайт, на котором фоновое изображение Div-элемента меняется каждый раз, когда пользователь перезагружает страницу. Это фоновое изображение этого элемента Div всегда должно быть случайным.

Он также должен смениться на другое случайно выбранное фоновое изображение с переходом в затухание через 3-5 секунд.

Я пробовал Jquery.Cycle2.js и Jquery.shuffle.js, которые работают нормально, когда я делаю этот переход, но они не меняют на случайное фоновое изображение. Они также не меняют фоновое изображение на случайное, когда кто-то перезагружает страницу.

Я также пробовал image = new Array и использовать элементы JavaScript Math.round и Math.random. Они работают нормально, когда мне нужно случайное фоновое изображение, когда кто-то обновляет / перезагружает страницу, но он не меняет его на другое случайное фоновое изображение (и, следовательно, не выполняет переход).

Итак, я хотел бы иметь Div-Element, который имеет случайное фоновое изображение (и оно всегда случайное и меняется на другое случайное фоновое изображение, когда пользователь перезагружает страницу), и он меняется на другое случайное фоновое изображение через 3-5 секунд с помощью Эффект затухания.


javascript image random jquery fade
person Tankslacno    schedule 12.02.2014    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Создайте div для изображения внутри основного div, как указано ниже:

<div style="height: 500%">
    <div id="imageDiv" class="imageContainer"></div>
    Spider Code
</div>

Установите CSS imageContainer:

.imageContainer {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.5;
    z-index: -1;
    background-repeat: no-repeat;
}

Теперь добавьте пару изображений в папку с вашим решением и создайте для этого массив. В моем случае имена изображений: 1.png, 2.png и т. Д.

и создайте сценарий, как указано ниже:

<script type="text/javascript" language="javascript">

    var myImages = new Array("1.png", "2.png", "3.png", "4.png", "5.png");

    $(document).ready(function() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];
        random = 'url(images/' + random + ')';
        $('#imageDiv').css('background-image', random);

        setInterval(function() {
            SetImage();
        }, 5000);
    });

    function SetImage() {
        var random = myImages[Math.floor(Math.random() * myImages.length)];

        random = 'url(images/' + random + ')';
        $('#imageDiv').fadeOut(2000);

        setTimeout(function () {
            $('#imageDiv').css('background-image', random);
            $('#imageDiv').fadeIn(2000);
        }, 2000);
    }
</script>
person SpiderCode    schedule 12.02.2014
comment
@Tankslacno: Рад решить вашу проблему :). не забудьте проголосовать за и пометить его как ответ, чтобы он мог помочь и другим пользователям. - person SpiderCode; 12.02.2014

arrow_upward
0
arrow_downward

вы можете попытаться решить эту проблему с помощью функции javascript Random и дать своим фоновым изображениям разные идентификаторы, которые будут связаны с числами, и вот, у вас есть случайное перемешивание

person Yuriy Kravets    schedule 12.02.2014

arrow_upward
0
arrow_downward

Я бы использовал что-то вроде этого:

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

источник: Генератор случайных цветов в JavaScript

Затем добавьте немного волшебства ... Рабочий ДЕМО: http://fiddle.jshell.net/re353/

person Cracker0dks    schedule 12.02.2014