2011-04-27 143 views
0

过去几天我们一直在努力创造一个图像滑块。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

谢谢:)

+0

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

回答

0

怎么样像这样(未经):

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