Эй, я хочу исчезнуть в новом фоновом изображении, скажем каждые 60 секунд. Я установил фоновое изображение следующим образом:
body {background-image: url(background.jpg);}
Теперь я хочу изменить его, поэтому через 60 секунд он изменится на background2.jpg, затем через 60 секунд на background3.jpg и т.д.
Я нашел много вещей, не меняя его в теле, но как изображение... любые быстрые решения?
Спасибо!
Изменения:
Взял мясо этого кода из этого предыдущего ответа и добавил немного bling (используя мой фон фонового лома)
JavaScript:
$(document).ready(function () {
var img_array = [1, 2, 3, 4, 5],
newIndex = 0,
index = 0,
interval = 5000;
(function changeBg() {
// --------------------------
// For random image rotation:
// --------------------------
// newIndex = Math.floor(Math.random() * 10) % img_array.length;
// index = (newIndex === index) ? newIndex -1 : newIndex;
// ------------------------------
// For sequential image rotation:
// ------------------------------
index = (index + 1) % img_array.length;
$('body').css('backgroundImage', function () {
$('#fullPage').animate({
backgroundColor: 'transparent'
}, 1000, function () {
setTimeout(function () {
$('#fullPage').animate({
backgroundColor: 'rgb(255,255,255)'
}, 1000);
}, 3000);
});
return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
});
setTimeout(changeBg, interval);
})();
});
CSS
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
background-image: url(http://www.fleeceitout.com/images/field.2.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
#fullPage {
position: absolute;
min-width: 100%;
min-height: 100%;
top: 0;
left: 0;
background-color: rgb(255, 255, 255);
}
Вы можете использовать метод setInterval и переключаться между классами, определенными в вашем CSS, которые имеют разные фоновые изображения:
setInterval(function() {
var $body = $('body');
if($body.hasClass('background1'))
{
$body.removeClass('background1');
$body.addClass('background2');
}
else {
$body.removeClass('background2');
$body.addClass('background1');
}
}, 1000);
В этом примере используется интервал 1000, который составляет одну секунду. Вы можете изменить это значение за любой период времени, который вы ищете.
UPDATE
Заметил, что ваш вопрос попросил угасить, поэтому я добавил свойство CSS3 в тело:
body
{
transition: background 0.5s linear;
}
Обновлен скрипт.
Основываясь на ответе от Dan-Nolan (ранее user506980), вы также можете назначить фоны массиву, а затем вызвать каждый фон из массива с помощью счетчика
Кроме того, вы можете назначить функцию setInterval переменной, а затем использовать эту переменную позже, чтобы остановить повторы.
$(document).ready(function() {
var cnt=0, bg;
var $body = $('body');
var arr = ['bg1.jpg','bg2.jpg','bg3.jpg','bg4.jpg','bg5.jpg','bg6.jpg'];
var bgrotater = setInterval(function() {
if (cnt==5) cnt=0;
bg = 'url("' + arr[cnt] + '")';
cnt++;
$body.css('background-image', bg);
}, 1000);
//To stop the backgrounds from rotating. Note the critical step above
//of assigning the setInterval function to a variable, in order to
//use it again (below) to stop the repeating function
$('#some_button_id').click(function() {
clearInterval(bgrotater);
});
}); //END document.ready
Поскольку я построил ответ Дэн-Нолана, пожалуйста, поддержите его ответ, если вы выдвинете этот вариант. И я вижу, что Дерик добавил его, и это тоже правильно. Upvote.
https://github.com/srobbin/jquery-backstretch Backstretch - это простой плагин jQuery, который позволяет добавлять динамически измененное изображение с поддержкой слайд-шоу на любую страницу или элемент. Изображение будет растягиваться, чтобы соответствовать странице/элементу, и будет автоматически изменяться по мере изменения размера окна/элемента.
jQuery(document).ready(function() {
var cnt=0, bg;
var $body = jQuery('body');
var arr = ['secondbg.jpg','sartulebis-archeva2.png'];
animate = function(){
}
var bgrotater = setInterval(function() {
if (cnt==2) cnt=0;
bg = 'url("http://yalcingroup.ge/test/wp-content/uploads/2015/08/' + arr[cnt] + '")';
cnt++;
jQuery('#background_cycler').animate({opacity:1}, 2000, function(){
$body.css('background-image', bg);
});
jQuery('#background_cycler').animate({opacity:0}, 2000);
},10000);
});
Каждые 12 секунд изображение изменяется в контейнере присутствия; это может быть тег тела
HTML
<div class="presentacion">
<div class="mask"></div>
</div>
JS
delay (11000) + setTimeout (1000) = 12 с длительность перехода = 300 + 300 = 600 мс
var imgArray = ['image-1', 'image-2', 'image-3'], index = 0;
(function changeBG(){
// mask element only for transition
$('.mask').delay(11000).animate({opacity:1}, 300, function(){
index = (index + 1) % img_array.length;
// in presentacion element change bg images
$('.presentacion').css("background-image", "url('images/bg-"+imgArray[index]+".jpg')");
}).animate({opacity: 0}, 300);
setTimeout(changeBG, 1000);
})();
CSS
.presentacion {
background-attachment: fixed;
background-color: rgba(0, 0, 0, 0.5);
background-image: url("images/image-1.jpg");
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
position: relative;
width: 100%;
z-index: 0;
opacity: 1;
}
.mask {
background-color: rgba(0,0,0,0);
bottom: 0;
left: 0;
opacity: 0;
position: absolute;
right: 0;
top: 0;
height: 100%;
z-index: 10;
}
Основываясь на ответе Дерика...
Если jQuery Color не работает должным образом (что он иногда делает), вы можете вместо этого использовать fadeIn() и fadeOut():
$(document).ready(function () {
var img_array = [1, 2, 3, 4, 5],
newIndex = 0,
index = 0,
interval = 5000;
(function changeBg() {
// --------------------------
// For random image rotation:
// --------------------------
// newIndex = Math.floor(Math.random() * 10) % img_array.length;
// index = (newIndex === index) ? newIndex -1 : newIndex;
// ------------------------------
// For sequential image rotation:
// ------------------------------
index = (index + 1) % img_array.length;
$('body').css('backgroundImage', function () {
$('#fullPage').fadeOut(1000, function () {
setTimeout(function () {
$('#fullPage').fadeIn(1000);
}, 3000);
});
return 'url(http://www.fleeceitout.com/images/field.' + img_array[index] + '.jpg)';
});
setTimeout(changeBg, interval);
})();
});