Главная Интернет Как сделать слайд-шоу из изображений в указанной папке?
Баннер

Как сделать слайд-шоу из изображений в указанной папке?

Полезное - Интернет

Чтобы создать на сайте слайдшоу из изображений, в указанной папке, Вам понадобится произвести несколько простых действий.

Подключить библиотеку 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>

Как видите, сам код действительно получился очень маленьким и не содержит кучи излишних функций. Но при таком небольшом коде есть и свои маленькие минусы. Например, все изображения должны быть в одной папке (подпапки не поддерживаются) и в папке с изображениями не должно быть других файлов.

 
Баннер

Популярные вопросы