Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

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

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

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 10.08.2019, 15:18   #1
ne4aev
Новичок
Джуниор
 
Регистрация: 10.08.2019
Сообщений: 1
По умолчанию Плавность перехода фона 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, 17:55   #2
Serge_Bliznykov
Старожил
 
Регистрация: 09.01.2008
Сообщений: 26,238
По умолчанию

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

или, как вариант:
Код:
<!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 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


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