jQuery图像滑块？

问题描述：

过去几天我们一直在努力创造一个图像滑块。jQuery图像滑块？

基本上，我们想要的是图像的列表，例如：

<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的内容是图像的阵列中，imageshow DIV将内容区域在当前选定的图像将显示，并且前一个和下一个链接在图像中滚动。

我们只想一次选择一张图像，图像可以通过上一个和下一个链接进行更改。

我们在互联网上发现了类似于此的脚本，但它们带有其他我们不需要的功能，并且它们只是停留在页面上。我们还需要该脚本在页面上多次使用，因为此页面将包含2,3,4甚至更多此功能，所以如果明白我的意思，这个图像滚动器将需要为每个页面工作。

我们该如何去做这件事？因此，我们可以模仿的东西，看起来像下面的图片：

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

谢谢:)

我假设他想要在一个页面上加载不同画廊的多个实例，并且大多数画廊都要求将该数组加载到页面上，所以json也许是更清洁的方法。从ajax请求中解雇。只是一个猜测 – 422 2011-04-27 02:48:56

答

退房：http://www.no-margin-for-errors.com/projects/prettyGallery/

答

怎么样像这样（未经）：

<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>

jQuery图像滑块？

相关推荐