JavaScript динамически меняет стиль фона CSS

Question

JavaScript динамически меняет стиль фона CSS

0

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

Исходный CSS: (Я переопределяю стиль по умолчанию из другого файла CSS)

<style>
      .jumbotron { 
         background: #7da7d8 url('images/rotunda2.jpg') no-repeat center center !important; 
      }
</style>

JavaScript:

$(document).ready(function () {

var count = -1;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
setInterval(swap, 5000);

function swap(){
    $('.jumbotron').css("background", "#7da7d8 url('"+images[++count % images.length]+"') no-repeat center center !important");
    console.log(images[++count % images.length]);
}

});

Есть идеи?

littleK 19 фев. 2014, в 03:31

Источник

0

Первое предположение - правильно ли разрешается относительный путь к изображению.
Kai Qing 19 фев. 2014, в 01:39
0

есть демо? или ссылка? В любом случае, не следует ли проверять условие для if (count> images.length) {count == - 1;} или clearInterval, если не цикл?
Venkat Reddy 19 фев. 2014, в 01:42
0

Я не вижу, чтобы что-то сбрасывало ваш счет, кажется, что оно постепенно увеличивается. Кроме того, почему вы должны использовать 2 разных имени класса? миэлемент и джумботрон?
aiiwa 19 фев. 2014, в 01:46
0

Моя ошибка, myelement должен быть jumbotron. Кроме того, я хочу, чтобы это зациклилось навсегда.
littleK 19 фев. 2014, в 01:49
0

Ваш JavaScript ожидает загрузки документа?
Cilan 19 фев. 2014, в 01:52
0

Смотрите редактирование выше. У меня есть $ (документ) .ready (function () {
littleK 19 фев. 2014, в 01:56
0

@littleK, я понимаю, что вы хотите, чтобы он зацикливался вечно, но вам нужно сбросить счетчик, когда он достигнет длины вашего массива изображений, потому что, если он продолжал увеличиваться, скажем, считать = 3, ваши изображения не имеют индекса 3 там.
aiiwa 19 фев. 2014, в 01:57

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

4 ответа

1

Вы - функция подкачки, кажется странной. Как правило, для чего-то подобного, вы можете иметь счетчик, который получает приращение, а затем просто сбрасывается до 0 и начинается. Также убедитесь, что вы работаете в контексте обработчика события onload.

var count = 0;
var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");

function swap(){
    //get the next image
    var nextImage = images[count];
    console.log(nextImage);

    $('.jumbotron').css("background-image", nextImage);

    //increment count
    count = count > images.length - 1 ? 0 : count+=1;
}

$(document).ready(function(){
  setInterval(swap, 5000);
});

помимо этого, обязательно проверьте свою консоль ошибок на наличие ошибок, а для 404 укажете, что у вас могут быть неправильные пути изображения

thescientist 19 фев. 2014, в 00:56

1

Попробуй это:

$(document).load(function() {
    var count = -1;
    var images = ['images/image1.jpg', 'images/image2.jpg', 'images/image3.jpg'];
    setInterval(swap, 5000);

    function swap() {
        var img = images[++count % images.length];

        $('.jumbotron').css('background', '#7da7d8 url(' + img + ') no-repeat center center !important');
        console.log(img);
    }
});

ducdhm 19 фев. 2014, в 00:04

0

Подождите, пока документ загрузится:

$(document).load(function()
{
    var count = -1;
    var images=new Array("images/image1.jpg","images/image2.jpg","images/image3.jpg");
    setInterval(swap, 5000);

    function swap(){
        $('.jumbotron').css("background", "#7da7d8 url("+images[++count % images.length]+") no-repeat center center !important");
        console.log(images[++count % images.length]);
    }
});

Cilan 18 фев. 2014, в 23:47

Ещё вопросы

Первое предположение - правильно ли разрешается относительный путь к изображению.
есть демо? или ссылка? В любом случае, не следует ли проверять условие для if (count> images.length) {count == - 1;} или clearInterval, если не цикл?
Я не вижу, чтобы что-то сбрасывало ваш счет, кажется, что оно постепенно увеличивается. Кроме того, почему вы должны использовать 2 разных имени класса? миэлемент и джумботрон?
Моя ошибка, myelement должен быть jumbotron. Кроме того, я хочу, чтобы это зациклилось навсегда.
Ваш JavaScript ожидает загрузки документа?
Смотрите редактирование выше. У меня есть $ (документ) .ready (function () {
@littleK, я понимаю, что вы хотите, чтобы он зацикливался вечно, но вам нужно сбросить счетчик, когда он достигнет длины вашего массива изображений, потому что, если он продолжал увеличиваться, скажем, считать = 3, ваши изображения не имеют индекса 3 там.

jingyinggong · Accepted Answer · 2014-02-19T00-04-00.000Z

Я не думаю, что изменение css - хорошая идея, вы можете определить некоторые классы и динамически изменить классы на элементе!

HTML:

<div class="dynamicBg class1"></div>
<div class="dynamicBg class1"></div>

CSS:

.dynamicBg {
    background-color: #7da7d8;
    background-repeat: no-repeat;
    background-position: center center;
}
.class1 {
    background-image: url('images/image1.jpg');
}
.class2 {
    background-image: url('images/rotunda2.jpg');
}
.class3 {
    background-image: url('images/rotunda3.jpg');
}
.class4 {
    background-image: url('images/rotunda4.jpg');
}

ЯШ:

$(function() {
    var classStr = 'class1 class2 class3 class4',
        classArr = classStr.split(' '), i = 0,
        $dynamicBg = $('.dynamicBg');
    setInterval(function() {
        i = i > 3 ? 0 : i + 1;
        $dynamicBg.removeClass(classStr).addClass(classArr[i]);
    }, 5000);
});