Javascript: интерактивное слайд-шоу

Question

Итак, я сделал простое слайд-шоу с тремя циклами изображений. Что мне нужно сделать, это добавить код js, чтобы мои кнопки работали. Если это не понятно по названию, я хочу нажать предыдущую кнопку, чтобы вернуться на одно изображение, и следующую кнопку, чтобы перейти к следующему изображению.

Также я хочу сохранить код в отдельных документах (один для HTML, один для CSS, один для JS).

var image1 = new Image()
image1.src = "pics/image1.png"
var image2 = new Image()
image2.src = "pics/image2.png"
var image3 = new Image()
image3.src = "pics/image3.png"

var nr = 1;

function slideshow() {

    document.images.slideshow.src = eval("image" + nr + ".src");

if (nr < 3) nr++;

    else nr = 1;

    setTimeout("slideshow()", 3000);

}

var prev = document.querySelector(".prev");
var next = document.querySelector(".next");


slideshow();

Найдите полный код здесь: здесь: http://jsfiddle.net/n5HHz/1/ (файлы изображений не работают)

Очень благодарен за помощь!

Answer 1

http://jsfiddle.net/n5HHz/10/

Все еще не идеально, но, возможно, это поможет вам немного узнать, как вы можете сделать это с помощью методов onclick.

Также теперь он запускается автоматически, и добавлен jquery.

$ (document).ready (function () {slideshow ();});

Изображения просто случайны:

 var image1 = new Image()
 image1.src = "http://d1jqu7g1y74ds1.cloudfront.net/wp-content/uploads/2013/11/alma-580x580.jpg"
 var image2 = new Image()
 image2.src = "http://static.adzerk.net/Advertisers/bc85dff2b3dc44ddb9650e1659b1ad1e.png"
 var image3 = new Image()
 image3.src = "http://staticd.cdn.adblade.com/banners/images/100x75/4365_5229fd58bdf87.jpg"