Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

Вернуться   Форум программистов > Web > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 15 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 10.08.2019, 16:18   #1
ne4aev
Новичок
 
Регистрация: 10.08.2019
Сообщений: 1
Репутация: 10
По умолчанию Плавность перехода фона JS

Добрый день. Подскажите пожалуйста, как сделать переход от картинке к картинке плавным. Сейчас картинки переключается резко.

Код:
$(function() {
    var images = [{
            url: "https://www.imageup.ru/img132/3447652/fon3.jpg", // Картинка
            timeout: 10000 // Задержка для картинки
        }, {
            url: "https://www.imageup.ru/img132/3447653/fon2.jpg",
            timeout: 10000
        }, {
            url: "https://www.imageup.ru/img132/3447654/fon1.jpg",
            timeout: 10000
        }],
        i = 20,
        timeout;

    
    function changeBackground() {
        clearTimeout(timeout);

        $('#home').css('background-image', function() {
            if (i >= images.length)
                i = 0;
            
            timeout = setTimeout(changeBackground, images[i].timeout);
            
            return 'url(' + images[i++].url + ')';
        });
              
    }

    changeBackground();        
});
ne4aev вне форума   Ответить с цитированием
Старый 10.08.2019, 18:55   #2
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 25,680
Репутация: 5617
По умолчанию

посмотрите, вот этот скрипт не решает вашу проблему?
Serge_Bliznykov вне форума   Ответить с цитированием
Старый 10.08.2019, 20:22   #3
Serge_Bliznykov
МегаМодератор
СуперМодератор
 
Регистрация: 09.01.2008
Сообщений: 25,680
Репутация: 5617
По умолчанию

или, как вариант:
Код:
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>slideDown demo</title>
  <style>
    body {
    background:black url('https://www.imageup.ru/img132/3447652/fon3.jpg');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size:cover;
}

#img1, #img2, #img3 {

    width:100%;

    height:100%;

    display:none;

    position:fixed;

    z-index:-1;

}  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>

    <img id="img1" src="https://www.imageup.ru/img132/3447652/fon3.jpg">
    <img id="img2" src="https://www.imageup.ru/img132/3447653/fon2.jpg">
    <img id="img3" src="https://www.imageup.ru/img132/3447654/fon1.jpg">

 
<div>Text1</div>
<div>Text2</div>
<div>Text3</div>
 
<script>
$(function() {
    var i = 0;

    
    function changeBackground() {

	switch(i) {
		case 0: $('#img1').fadeOut({});
			$('#img2').fadeIn({});
			i++;
    			break;	
		case 1: $('#img2').fadeOut();
			$('#img3').fadeIn();
			i++;
    			break;	
		case 2: $('#img3').fadeOut();
			$('#img1').fadeIn();
			i=0;
    			break;	
	}
    }

    setInterval(changeBackground, 2000);        
});
</script>
 
</body>
</html>
Serge_Bliznykov вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Ссылка без перехода Pamparam JavaScript, Ajax 1 14.01.2015 02:36
Ссылки перехода. Небесный PHP 4 24.03.2011 14:05
эффекты перехода Наки Мультимедиа в Delphi 8 04.11.2010 14:39
Запрет перехода 8Акр8 JavaScript, Ajax 19 04.03.2009 00:42
Кнопки перехода Мария100684 Microsoft Office Access 1 03.10.2008 19:52


03:04.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.

Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru