В данной теме мы рассмотрим небольшую модификацию скрипта
Слайд-шоу всех изображений из папки, суть которой заключается в добавлении в скрипт кнопок "следующая" и "предыдущая".
При нажатии на данные кнопки должно выводиться соответственно следующее или предыдущее изображение из очереди слайд-шоу.
Вот весь код целиком:
Код:
<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="Следующая">