Чтобы создать на сайте слайдшоу из изображений, в указанной папке, Вам понадобится произвести несколько простых действий.
Подключить библиотеку jQuery:
JavaScript код:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Далее в том месте Вашей странички, где Вы планируете показывать слайдшоу, добавьте следующий код:
<div align="center" style="height:20px;">
<img src="image/time/colon.gif" alt="" id="slide_show"></div>
Где image/time/colon.gif - URL адрес первого показываемого изображения. Это необходимо для того чтобы в то время, пока грузится Ваша страничка (и скрипт соответственно тоже), на экране первоначально было изображение.
Как Вы могли заметить, изображение мы разместили внутри блока DIV высотой в 20 пикселей. Это сделано для того, чтобы при смене изображений, когда первое изображение пропало, а второе еще не появилось, не происходило "скачка" содержимого странички вверх. Это происходит из-за того, что в момент пропадания изображение получает свойство display:none; и его высота на короткий момент времени становится равной нулю. Из-за этого происходит сдвиг всего контента страницы на размер изображения вверх, а после появления изображения его размер вновь изменяется и контент странички сдвигается вниз.
Теперь Вам остается только разместить наш скрипт смены изображений где-нибудь ближе к концу странички, который найдет все изображения в указанной папке и будет менять их по очереди. Для этого скопируйте данный код:
<script type="text/javascript">
<?php
$images = array();
$folder = 'image/time/';
$array_to_js='var imgs=[';
$all_files = scandir($folder);
for ($i=2; $i<=sizeof($all_files)-1; $i++) {
$array_to_js.='"'.$folder.$all_files[$i].'",';
}
echo substr($array_to_js,0,-1).'];';
?>
var n=0;
var time=800;
play=setInterval("chgImg()", 3000);
function chgImg() {
$('#slide_show').fadeOut(time, function() {
$(this).attr('src', imgs[n]).fadeIn(time);
});
n++;
if (n>=imgs.length) n=0;
}
</script>
Как видите, сам код действительно получился очень маленьким и не содержит кучи излишних функций. Но при таком небольшом коде есть и свои маленькие минусы. Например, все изображения должны быть в одной папке (подпапки не поддерживаются) и в папке с изображениями не должно быть других файлов.