Как изменить CSS элемента с фоном элемента, который непрерывно меняется через определенные промежутки времени?

Question

Как изменить CSS элемента с фоном элемента, который непрерывно меняется через определенные промежутки времени?

0

Я использовал ниже код для изменения фона непрерывно с некоторыми временными интервалами тела HTML-страницы:

 jQuery(function ($) {
    var images = ["images/bg-a.jpg", "images/bg-b.jpg", "images/bg-c.jpg"];
    var currentImage = 0;

    function changeBackground() {
        $('#bdy').css({
            backgroundImage: 'url(' + images[++currentImage] + ')'
        });
        if (currentImage >= images.length - 1) {
            currentImage -= images.length;
        }
    }
    setInterval(changeBackground, 5000);
 });

Здесь "bdy" является идентификатором тела. теперь у меня есть три элемента span в этом теле как:

        <span class="controller" id="bg-a"></span>
        <span class="controller" id="bg-b"></span>
        <span class="controller" id="bg-c"></span>

теперь я хочу, например, если фон тела "bg-a.jpg", тогда необходимо изменить css диапазона с id = "bg-a" и если если фон тела "bg-b.jpg", то css диапазона, имеющего id = "bg-b", следует изменить и так же, как для span с id = "bg-c". Как это сделать?

user3021251 20 дек. 2013, в 07:43

Источник

0

сделать jsfiddle
Hiral 20 дек. 2013, в 06:13

Теги:

jquery

2 ответа

Ещё вопросы

Ravi Kumar · Answer 1 · 2013-12-20T03-50-00.000Z

это должно делать то, что вы хотите.

function changeBackground() {
    $( '#bdy' ).css( { backgroundImage: 'url(' + images[ ++currentImage ] + ')' } );
    if ( currentImage >= images.length - 1 ) {
        currentImage -= images.length;
    }
    var id = $('body').css('background-image');
    id = $('body').css('background-image');
    id = id.substring(id.lastIndexOf('/')+1,id.lastIndexOf('.'));
    $('span#'+id).css({...apply your css...});
}

Magnus Engdal · Answer 2 · 2013-12-20T03-34-00.000Z

Здесь у вас есть одно возможное решение:

http://jsfiddle.net/M3YL3/

jQuery(function ($) {
 var images = [
     {url: 'http://placekitten.com/200/302', id: 'bg-a', color: '#ffff00'},
     {url: 'http://placekitten.com/200/303', id: 'bg-b', color: '#ff00ff'},
     {url: 'http://placekitten.com/200/304', id: 'bg-c', color: '#ff0000'}
 ];
 var currentImage = 0;

 function changeBackground() {
     $('#bdy').css({
         backgroundImage: 'url(' + images[++currentImage].url + ')'
     });
     $('#' + images[currentImage].id).css({'background-color': images[currentImage].color});
     if (currentImage >= images.length - 1) {
         currentImage -= images.length;
     }
 }

 setInterval(changeBackground, 5000);
});

Надеюсь, поможет!