Javascript слайда-шоу - Добавить следующие/вперед и предыдущие/назад

-1

У меня есть этот яваскрипт слайд-шоу, которое работает отлично с возможностью паузы/воспроизведения:Javascript слайда-шоу - Добавить следующие/вперед и предыдущие/назад

<html> 
<head> 
<title>Simple Javascript Slideshow</title> 
<script type="text/javascript"> 
var i = 0, imgsrc = new Array(), preload = new Array(); 
imgsrc[0]="photos/image1.png"; 
imgsrc[1]="photos/image2.png"; 
imgsrc[2]="photos/image3.png"; 
for (var j=0;j<imgsrc.length;j++) 
{ 
preload[j] = new Image; 
preload[j].src = imgsrc[j]; 
} 
function mode(param) 
{ 
smode=param; 
} 
function startSlideshow() 
{ 
if(smode=="play") 
{ 
document.getElementById("play").disabled="disabled"; 
document.getElementById("pause").disabled=""; 
document.getElementById("stop").disabled=""; 
document.getElementById("slideshow").src=imgsrc[i]; 
i++; 
setTimeout("startSlideshow()",1000); 
} 
else if(smode=="pause") 
{ 
document.getElementById("pause").disabled="disabled"; 
document.getElementById("play").disabled=""; 
document.getElementById("play").value="Resume"; 
} 
else if(smode=="stop") 
{ 
document.getElementById("play").disabled=""; 
document.getElementById("play").value="Play"; 
document.getElementById("pause").disabled="disabled"; 
document.getElementById("stop").disabled="disabled"; 
document.getElementById("slideshow").src=imgsrc[0]; 
i=0; 
} 
if(i==imgsrc.length) 
{ 
i=0; 
} 
} 
</script> 
</head> 
<body> 
<img id="slideshow" src="photos/Aanimation-ir001.png" /> 
<br /> 
<input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" /> 
<input id="pause" type="button" value="Pause" disabled="disabled" 
onclick="mode('pause');startSlideshow();" /> 
<input id="stop" type="button" value="Stop" disabled="disabled" 
onclick="mode('stop');startSlideshow();" /> 
</body> 
</html>

Было бы здорово иметь обратную перемотку вперед/назад (следующий/предыдущее изображение) для использования с параметром pause.

Возможно ли это?

С наилучшими пожеланиями

источник

2016-03-11 droid

Да, это возможно. – Roberto

Отлично, супер, как? – droid

Хорошо, вы не знаете .... – droid

Вы должны быть в состоянии понять это с текущим кодом.

Вот некоторые подсказки:

Изображение, отображаемое в данный момент определяется следующим образом:

document.getElementById("slideshow").src=imgsrc[i];

Если текущее отображаемое изображение имеет индекс i, то, что индекс имеет следующий есть? Как насчет предыдущего?

После того, как вы решили эту проблему, вы должны связать свою новую функцию (или новый случай существующей функции) для вашего HTML-разметки, как вы сделали здесь:

<input id="next" type="button" value="Next" onclick="mode('next');" />

В качестве примечания, вы должны обратите внимание на то, что произойдет, если вы показываете последнее (или первое) изображение и нажмите следующий (или предыдущий).

Надеюсь, что это поможет.

источник

2016-03-11 17:10:51 Komo

Думает, что я получил это теперь:

Это то, что я получил для прямого-варианта:

if(smode=="next") 
{ 
document.getElementById("play").disabled=""; 
document.getElementById("pause").disabled=""; 
document.getElementById("stop").disabled=""; 
document.getElementById("next").disabled=""; 
document.getElementById("slideshow").src=imgsrc[i++]; 

}

И с отсталым:

if(smode=="pre") 
    { 
    document.getElementById("play").disabled=""; 
    document.getElementById("pause").disabled=""; 
    document.getElementById("stop").disabled=""; 
    document.getElementById("next").disabled=""; 
    document.getElementById("slideshow").src=imgsrc[i--]; 

    }

И чтобы не идти от 0 до -1, -2 и т. д. Я получил это:

if (i == - 1) {

i = 23;

}

НО: Когда я нажимаю назад она идет вперед на первый щелчок, а затем перейти назад на второй клик?

С уважением

источник

2016-03-11 18:22:10 droid

Пожалуйста, не публикуйте ответ, отредактируйте свой начальный пост, если вам нужно отправить код. Я не понимаю 'i = 23', вы имеете в виду' 2'? – Komo

Потому что, если он нажмет перемотку, он когда-нибудь перейдет в -1, и это не хорошо, поэтому я хочу, чтобы вместо этого он перешел к последнему изображению, а это изображение 23. – droid

Я действительно не понимаю, что случилось, но вы, я предложите простые 'i = i + 1' и' i = i - 1' вместо 'i ++' и 'i -', потому что 'i ++ ', например, вернет i и **, затем ** увеличит переменную i. Это не то, что вы хотите. – Komo

Javascript слайда-шоу - Добавить следующие/вперед и предыдущие/назад

ответ

Смежные вопросы