Как изменить JS скрипт, что бы кнопки на слайд шоу работали как "предыдущая" и "следующая"

@Зеликов · Регистрация: 22.10.2013

Студворк — интернет-сервис помощи студентам

Есть такой вот JS скриптик

Javascript

var imgs = ["foto_slide_show_1.jpg","foto_slide_show_2.jpg","foto_slide_show_3.jpg"];
var text = ['Картинка 1','<a href="index.php">Картинка 2</a>',
            '<font color="red">Картинка 3</font>','Картинка 4'];
var n=0;
time=800;
play=setInterval("chgImg(0)", 5000);
 
function chgImg(number) {
if (number!=0) n=number-2;
 $('#slide_show').fadeOut(time, function() {    //для картинок
  $(this).attr('src', imgs[n]).fadeIn(time);
 });
 
 $('#slide_text').fadeOut(time, function() {    //для текста
  $(this).html(text[n]).fadeIn(time);
 });
 
n++;
if (n>=imgs.length) n=0;
}

Так вот вывожу картинки

PHP

<div id = "foto_slide_show">
    <img src="foto_slide_show_1.jpg" alt="" id="slide_show">
    <img src="foto_slide_show_2.jpg" alt="" id="slide_show">
    <img src="foto_slide_show_3.jpg" alt="" id="slide_show">    
</div>

А так кнопки, которые работают при нажатии на определённый слайд. А мне нужно что бы гоняли слайд вперед назад. Подскажите, что можно сделать?

PHP

        <div id = "foto_slide_show_click">
            <div id = "foto_slide_show_prev" onclick="chgImg(4)"> <p><b> < </b></p> </div>
            <div id = "foto_slide_show_next" onclick="chgImg (2)"> <p><b> > </b></p> </div>
        </div>

@Опан · 20.05.2017, 10:55

Создайте переменную:

Javascript

1	var index = 1;

А код кнопок изменить так:

HTML5

<div id = "foto_slide_show_click">
            <div id = "foto_slide_show_prev" onclick="index--;chgImg(index)"> <p><b> < </b></p> </div>
            <div id = "foto_slide_show_next" onclick="index++;chgImg(index)"> <p><b> > </b></p> </div>
</div>

Но это незаконченное внедрение, когда картинки закончатся - выдаст ошибку. Решение будет зависеть от того, что будет требоваться - начать с начала или приостановить показ.

Опции темы