JQuery изображение слайдер?

Question

В течение последних нескольких дней мы боролись за создание слайдера изображений.

По сути, все, что нам нужно, это список изображений, например:

<ul id="images">
<li id="1">http://www.site.com/image1.jpg</li>
<li id="2">http://www.site.com/image2.jpg</li>
<li id="3">http://www.site.com/image3.jpg</li>
<li id="4">http://www.site.com/image4.jpg</li>
<li id="5">http://www.site.com/image5.jpg</li>
</ul>

<div id="imageshow"> photo X of TOTAL </div>

<a id="prev">previous</a>
<a id="next">next</a>

Так что в основномсодержимое UL - это массив изображений, div imageshow - это область содержимого, в которой будет отображаться выбранное в данный момент изображение, а предыдущие и последующие ссылки прокручивают изображения.

Мы хотим, чтобы отображалось только одно изображениевыбрано за раз, и изображение можно изменить с помощью ссылок prev и next.

Мы нашли в Интернете сценарии, подобные этому, но они поставляются с другими функциями, которые нам не нужны, и они просто болотныевниз по странице.Нам также нужно, чтобы этот скрипт работал более одного раза на странице, так как эта страница будет содержать 2, 3, 4 или даже больше этой функции, поэтому этот скроллер изображений должен работать для каждого, если вы понимаете, о чем я.

Как мы можем это сделать?Таким образом, мы можем эмулировать что-то похожее на изображение ниже:

http://i53.tinypic.com/21b18pe.jpg

Спасибо:)

Answer 1

Выезд: http://www.no -margin-for-errors.com / projects / prettyGallery /

Answer 2

что-то вроде этого (не проверено):

<script>
var imageArray=Array("image1.jpg","image2.jpg","image3.jpg","image4.jpg","image5.jpg");
var spot=0;
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;

function nextpic(){
spot++;
if((spot+1)==imageArray.length){spot=0;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length;
}

function prepic(){
spot--;
if((spot<0){spot=imageArray.length;}
document.getElementById('imageshow').innerHTML="<img src=\""+imageArray(spot)+"\"/><br/>Photo "+(spot+1)+" of "+imageArray.length";
}
</script>
<div id="imageshow"></div>

<a id="prev" onclick="prepic()">previous</a>
<a id="next" onclick="nextpic()">next</a>