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的内容是图像的数组，imageshow div将是当前所选图像将显示的内容区域，并且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>

jquery图像滑块？

2 个答案: