Плавность перехода фона JS - JavaScript, Ajax

ne4aev · 10.08.2019, 15:18

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

Код:

$(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();        
});

Serge_Bliznykov · 10.08.2019, 17:55

посмотрите, вот этот скрипт не решает вашу проблему?

Serge_Bliznykov · 10.08.2019, 19:22

или, как вариант:

Код:

<!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>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Ссылка без перехода	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

10.08.2019, 17:55	#2
Serge_Bliznykov Старожил Регистрация: 09.01.2008 Сообщений: 26,229	посмотрите, вот этот скрипт не решает вашу проблему?