слайд-шоу для фона фона div + jquery

У меня есть большой элемент div в заголовке, и в div есть много текстового содержимого и некоторых ящиков. и у меня есть большой img как bg для этого div, теперь мне нужно сделать слайд-шоу для фона этого div:/слайд-шоу для фона фона div + jquery

Как сделать слайд-шоу для фонового изображения div?

Я исследовал много, но ничего не могли найти:/

Спасибо большое! оценить!

источник

2009-09-22 designer-trying-coding

Один из способов сделать это, чтобы сделать массив фоновых изображений:

var bgArr = ["img/bg1.jpg", "img/bg2.jpg"]; //and so on... 
function backgroundSlide(i) { 
    $("#header").css("background-image", "url("+bgArr[i++]+")"); 
    if (i == bgArr.length) i = 0; 
    var st = setTimeout(arguments.callee(i), 1000); 
} 
backgroundSlide(0)

Это просто цикл и цикл ...

источник

2009-09-22 11:43:44 peirix

Вы можете использовать следующие изменить фоновое изображение:

$("#mydiv").css("background-image", "url(1.jpg)");

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

источник

2009-09-22 11:44:38 kgiannakakis

Я тоже искал слайд-шоу css, спасибо за ваш вклад. Я исследовал ваше решение с помощью метода setTimeout, однако имел с ним серьезные проблемы (я нооб).

Я адаптировал решение peirix с альтернативой setInterval и придумал это;

var bgArr = ["images/TopImage-01.jpg", "images/TopImage-02.jpg", "images/TopImage-03.jpg" ]; 
var i=0; 

// Start the slide show 
var interval = self.setInterval("swapBkgnd()", 5000) 

function swapBkgnd() { 
if (i>(bgArr.length-1)) { 
    i=0 
    $("#header").css("background-image", "url("+bgArr[i]+")"); 
} 
else { 
    $("#header").css("background-image", "url("+bgArr[i]+")"); 
} 
i++; 
};

Теперь мне нужно добавить эффект затухания и предварительный загрузчик изображений, и меня не будет. Было бы интересно узнать, есть ли более простой способ достичь этого.

источник

2009-09-23 05:28:31

Пара дней до того, как я искал аналогичное объяснение. Ответ номер два был довольно хорошим, но, как я вижу, он нуждается в эффекте затухания. Я выполнил это (и многое другое). Вот код:

var bgArr = ['img1.png', 'img2.png', 'img3.png', 'img4.png']; 
var bgText = ['text1', 'text2', 'text3', 'text4']; 
var i=0; 
var left = 0; 

$(document).ready(function() { 
    timer = setTimeout("changeBG()", 7000); 

    $("#slider_left").on("click", function(){ 
     i = i-2; 
     if(i&lt;-1) i = bgArr.length-2;   
       left = 1;  
       clearTimeout(timer);   
       changeBG();  
     });  
     $("#slider_right").on("click", function(){  
       if(i&gt;(bgArr.length-1)) i = 0; 
     clearTimeout(timer); 
     changeBG(); 
    }); 
}); 

function changeBG() { 
    i++; 
    if(i&gt;(bgArr.length-1)) i = 0; 
    $('#slider_up').stop().fadeIn(1000, function(){ 
     if(left == 1){ 
     var a = i+1; 
     if(i == bgArr.length-1) 
      a = 0; 
     }else{ 
     var a = i-1; 
     if(i == 0) 
      a = bgArr.length-1; 
     } 
     left = 0; 

     $("#slider_up").css("background", "url("+bgArr[a]+") no-repeat center center white"); 
     $("#slider_up").css('opacity',0).show().animate({opacity:1}); 
     $("#slider_down").css("background", "url("+bgArr[i]+") no-repeat center center white"); 
     $("#slider_up").css('opacity',1).show().animate({opacity:0}); 
     $(".text_holder").fadeOut(1000, function() { 
     $(this).html(bgText[i]); 
     $(this).fadeIn(500); 
     }); 
    }); 
    timer = setTimeout("changeBG()", 7000); 
};

Я объяснил это на моем блоге: http://blog.braovic.com/css-background-slider-and-slideshow/

Надеется, что это поможет всем вам. Best, Ante.

источник

2013-04-07 16:05:29

Это может помочь вам - https://github.com/im4aLL/bose

$("#header").bose({ 
    images : [ "imagePath_1", "imagePath_2", "imagePath_3"] 
});

Но только выцветает переход. Удачи!

источник

2013-08-30 14:15:35 HADI

слайд-шоу для фона фона div + jquery

ответ

Смежные вопросы