0

Как сделать для секции фон (состоит из двух картинок) который меняется каждые 6 секунд через Background? Если возможно, подскажите со скриптом.

<section class="first">
</section>
.first
{
    background: #acfbfd;
    background: red;
    background: url(..//img/first/2bg.png);
    background-position: center;
    background-size: cover;
    height: 700px;
    padding: 70px 20px 70px 0;
}
.one
{
    background: #acfbfd;
    background: url(..//img/first/1bg.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 700px;
    padding: 70px 20px 70px 0;
}
$(function()
{
    setInterval(function()
    {
    }
}

1 ответ 1

1

Например такой код, переписано:

<!DOCTYPE html>
<html>
<head>
	<title>titile</title>
	<meta charset="utf-8">
	<style>
.one {
			background-image: url('http://36.media.tumblr.com/ddfa95b0f361df3848c8b58dc22ac27b/tumblr_nycdzlHYnu1sus0wio1_500.jpg');
		}
		div {
			background-image: url('http://vsefacty.com/uploads/interesnye_fakty_o_planete_zemlya_1.jpg');
			width: 500px;
			height: 333px;

			background-color: #acfbfd;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
		}
	</style>
	<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
	<script>
		$(function(){

			setInterval(function(){
				$('div').toggleClass('one');
			}, 3000);

		});
	</script>
</head>
<body>

<div>Секция</div>

</body>
</html>

9
  • Могли бы Вы подсказать, какая разница между toggleClass и addClass ?
    – SvArt713
    27 фев 2016 в 11:52
  • add - добавить, toggle - переключатель, если есть: убрать, если нет: добавить. 27 фев 2016 в 11:55
  • почему-то не работает
    – SvArt713
    27 фев 2016 в 11:58
  • Фон меняется, но если у первого изображения свойство background: cover работает, у второго почему-то нет, можно ли это как-то исправить ? Изображения по размеру одинаковые.
    – SvArt713
    27 фев 2016 в 12:10
  • в скрипте меняется только background-image, остальные background-свойства пропишите сами. 27 фев 2016 в 12:20

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.