Обведите фоновое изображение с Jquery

У меня есть 3 изображения - back_about_1.jpg, back_about_2.jpg, back_about_3.jpgОбведите фоновое изображение с Jquery

У меня есть DIV ID'ed -about- <div id="about"></div>

Мой умолчанию фон из DIV is back_about_1.jpg (устанавливается через css- background: url(../img/back_about_1.jpg) 50% 0 no-repeat fixed;background-size:cover;)

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

Любая помощь с Jquery бы хорошие ребята :)

источник

2014-01-12 Magesh Kumaar

JQuery является JavaScript – chepe263

Пытались что-то, что уже было здесь \t \t <сценарий type = 'text/javascript'> \t \t \t var imageID = 0; \t \t \t var aboutimg = document.getElementByID ("about"); \t \t \t функция changeimage (every_seconds) { \t \t \t если (ImageID!) { \t \t \t \t aboutimg.style.backgroundImage = "URL (IMG/back_about_1.jpg)"; \t \t \t imageID ++; \t \t \t} \t \t \t еще {если (ImageID == 1) { \t \t \t \t aboutimg.style.backgroundImage = «URL (IMG/back_about_2.JPG) "; \t \t \t ImageID ++; \t \t \t} еще {если (ImageID == 2) { \t \t \t \t aboutimg.style.backgroundImage = "URL (IMG/back_about_3.jpg)"; \t \t \t ImageID = 0; \t \t \t}}} \t \t \t SetTimeout ("changeimage (" + every_seconds + ")", ((every_seconds) * 1000)); \t \t \t} \t \t –

@ chepe263 Йуп Спасибо удалили ту часть поста –

Если предположить, что у вас есть что-то вроде:

#about{ 
    background: 50% 0 no-repeat fixed;background-size:cover; 
}

Это будет делать трюк:

$(function(){ 
    //Possible images 
    var images = ["img/back_about_1.jpg", "img/back_about_2.jpg", "img/back_about_3.jpg"]; 
    (function changeBg(index){ 
     $("#about").css('backgroundImage', 'url(' + images[index] +')'); 
     setTimeout(function(){ 
      changeBg((index + 1) % images.length); //This cycles 
     }, 5000); 
    })(0); 

});

Надеется, что это помогает. Приветствия

источник

2014-01-12 04:54:34

Man: D Спасибо lottttttttt :) Это помогло .. * Один маленький твик должен был удалить «../» из изображений переменной, но как только я сделал это, было круто. Спасибо, человек :) –

Рад, что это помогло вам :). Cheers, из La Paz, Bolivia –

Вы должны использовать интервал для изменения изображения каждых 5 вторых 100% рабочего

<html> 

<head> 
    <script src='jquery.min.js'/></script> 
<script type='text/javascript'> 
    $(document).ready(function(){ 
    $('#main').css('background-url','../img/back_about_1.jpg'); //default url of image 
    count = 0; 
    setInterval(function(){ 
    if(count==0){ 
    $('#main').css('background-url','../img/back_about_2.jpg'); //url of second image 
    }else if(count==1){ 
    $('#main').css('background-url','../img/back_about_3.jpg'); //url of third image 
    }else{ 
    $('#main').css('background-url','../img/back_about_1.jpg'); //urll of first image 
    } 
    if(count==2){ 
    count =0; 
    } 
    else{ 
    count++; 
    } 
    } 
    ,5000); //set the time 

    }); 
</script> 
</head> 
<body id='main'> 


</body> 

</html>

я взял время, чтобы сделать это, если вам нужна помощь, просят Это будет работать для вас

источник

2014-01-12 05:02:37 sanjeev

Yupp :) Это отлично работает :) .. Хотя иногда я не получаю изображение вместо этого, я получаю белый фон (возможно, мой фоновый фон по умолчанию для тела, который установлен на #fff)? Ты знаешь почему ? и извините, чувак. Я не могу проголосовать за этот ответ. Его высказывание мне нужно 15 репутации, так простите меня :) –

получить 15 репутации и проголосовать ха-ха .. – sanjeev

Here's an additional JQuery solution.

Чтобы установить это, вам нужно вложить 3 div, которые имеют фон, объявленный в другом div. Как так:

HTML

<div class="fadein"> 
    <div id="rotatingImage1"></div> 
    <div id="rotatingImage2"></div> 
    <div id="rotatingImage3"></div> 
</div>

CSS

#rotatingImage1{background:url('http://lorempixel.com/500/501/') no-repeat;position:absolute;width:500px;height:500px;} 
#rotatingImage2{background:url('http://lorempixel.com/500/502/') no-repeat;position:absolute;width:500px;height:500px;} 
#rotatingImage3{background:url('http://lorempixel.com/500/503/') no-repeat;position:absolute;width:500px;height:500px;}

И вот в JQuery Snippet:

jQuery(document).ready(function(){ 
    $(function(){ 
     $('.fadein div:gt(0)').hide(); 
     setInterval(function(){ 
      $('.fadein :first-child').fadeOut(1000) 
      .next('div').fadeIn(1000) 
      .end().appendTo('.fadein');}, 
      2000); 
    }); 
});

источник

2014-01-12 05:02:48

Обведите фоновое изображение с Jquery

ответ

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