Создать ответ 
Добавление кнопок следующая и предыдущая в слайд-шоу всех изображений из папки
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #1
Добавление кнопок следующая и предыдущая в слайд-шоу всех изображений из папки
В данной теме мы рассмотрим небольшую модификацию скрипта Слайд-шоу всех изображений из папки, суть которой заключается в добавлении в скрипт кнопок "следующая" и "предыдущая".

При нажатии на данные кнопки должно выводиться соответственно следующее или предыдущее изображение из очереди слайд-шоу.

Вот весь код целиком:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div style="height: 20px; text-align: center;">
<img src="image/time/colon.gif" alt="" id="slide_show">
</div>

<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 = 600;
var delay = 3000;
var play = setInterval("chgImg(1)", delay);

function chgImg(x) {
n = n + x;
if (n>=imgs.length) n = 0;
if (n<0) n = imgs.length;

$('#slide_show').fadeOut(time, function() {
        $(this).attr('src', imgs[n]).fadeIn(time);
});
}

function scroll_img(x) {
clearInterval(play);
chgImg(x);
play = setInterval("chgImg(1)", delay);
}
</script>


<input type="submit" onclick="scroll_img(-1)" value="Предыдущая">
<input type="submit" onclick="scroll_img(1)" value="Следующая">
03.10.2014 10:41:08
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru