Если Вы ищите простой скрипт, который бы плавно менял фоновые изображения (картинки) на любой html-странице, то предлагаю использовать следующий.
Смотрите также: 3D WebGL интерактивный фон на сайт
Его логика заключается в том, что Вы указываете лишь первое изображение, которое имеет имя, например:
image.jpg
Далее последующие имена должны быть например:
image2.jpg image3.jpg image4.jpg image5.jpg
Т.е. мы получаем изображения, которые лежат в одной папке на сервере:
image.jpg image2.jpg image3.jpg image4.jpg image5.jpg
Далее мы запускаем JavaScript функцию SetInterval, которая может происходить в заданное Вами время, например, каждые 5 секунд и менять фон задний на любой web- или html-странице. Если у Вас уже подключена библиотека jQuery, то этот пункт пропустите:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
После чего, Вы сможете либо на самой странице (что НЕ рекомендуется), либо в любом уже подключенном файле *.js дописать код. Или создать файл, например js.js и подключить его к странице, как и jquery, только укажите путь:
<script src="/sys/js.js" type="text/javascript"></script>
Сам код выглядит очень просто:
$('body').prepend('<div id="bgi"></div>');//добавили DIV с идентификатором, куда будут подгружаться изображения
var b = $('#bgi');//создали переменную, которая включает в себя этот DIV
var i3 = 2;//переменная нужна, чтобы изображения запускались со второго
$(b).css({background: '#fff url(https://f.inverser.pro/img/6/NeedFull.NET_krasivye-seksualnye-devushki-foto.jpg) 0 0 no-repeat'});/*подключаем CSS, которому задаем параметры с заданным изображением - это первое изображение*/
setInterval(function(){//запускаем временной интервал
$(b).css({background: '#fff url(https://f.inverser.pro/img/6/NeedFull.NET_krasivye-seksualnye-devushki-foto'+i3+'.jpg) 0 0 no-repeat',opacity:'0'}).animate({opacity:'1'},1700);//меняем фон на другой, увеличивая i на единицу (ниже)
if(i3 != 12){i3++}else{i3=2;// если i НЕ равно 12 (а 12 - это количество изображений), то мы увеличиваем i на 1
$(b).css({background: '#fff url(https://f.inverser.pro/img/6/NeedFull.NET_krasivye-seksualnye-devushki-foto.jpg) 0 0 no-repeat'});};// а также ставим первое изображение на фон
;},5000);//меняем изображение каждые 5 секунд (5000 миллисекунд)
Пояснения: путь ко всем изображениям, которые Вы хотите использовать НЕ должен быть разный. Все они должны лежать в определенной папке, например images/bg
Название файлов должно быть, как указано ^ вначале.
if(i != 12){i++}else{ —> эта строка отвечает за количество изображений. Например, если их 11, то добавляем 1 и получаем 12. Т.е. if(i != 12) должно быть, если у Вас 11 изображений.
Не забываем о CSS коде, который должен быть добавлен к контейнеру с изображениями, а ТАКЖЕ! ко всем контейнерам, которые должны быть поверх изображений.
Например, в коде выше, контейнер с изображениями - это bgi. А выше него, например, должен находится контейнер с текстом и другими данными с id="content".
CSS код для #bgi:
#bgi{position:fixed;z-index:0;top:0;left:0;right:0;bottom:0;}
Внимание! Если у Вас уже есть var i = 0... т.е. переменная i уже определена ранее, то надо её переименовать. Это счетчик, он часто используется в приложениях. Поэтому будьте внимательны. Без него работать не будет!
