有没有办法在jQuery中使用下一个/上一个按钮来切换图像?代码如下:
<div class="prevDiv">
<a href="#"><img src="images/prev.png" alt="previous" /></a>
</div>
<div class="pic" id="picwebd">
<img src="images/portfolio/webdesign/webd1.jpg" class="portPic" />
</div>
<div class="nextDiv">
<a href="#"><img src="images/next.png" alt="previous" /></a>
</div>
我试着修改这段代码来满足我的需要:http://jsfiddle.net/x5mCR/16/但我没有成功。我认为在图像src中递增和递减数字就足够了,但我不能拿出像样的代码来做这件事。Google也帮不上忙。
5条答案
按热度按时间shyt4zoc1#
如果任何人阅读这篇文章想要一个不同的方法仍然使用jQuery
fadeIn
,我张贴下面的代码。Here你可以找到它的小提琴。
这里是JavaScript部分
这是HTML部分
6kkfgxo02#
这里是动态和简单的脚本减少您的html代码
http://jsfiddle.net/x5mCR/32/
guz6ccqo3#
删除带有类
thumbnail
的锚点,并将相应的<img>
标签赋予thumbnail
类,然后对thumbnail类使用jQuery click方法:确保在
#fullimage
div中有一个.fullimage
。这与下一个/上一个按钮不同--但它可以修复您创建的JSFiddle。
http://jsfiddle.net/x5mCR/34/
gzjq41n44#
yptwkmov5#
如果我理解正确的话,你正在尝试使用箭头键在图片之间来回移动......所以如果是这样的话,我建议你看看这篇文章:Binding arrow keys in JS/jQuery
另外,为了方便起见,我只是从那篇文章中提取了代码,并将其与您的fiddle中的函数结合起来,得到了以下内容:
});
在测试中,它看起来可能需要一些修改,而且,当按下后退按钮时,您显然需要创建一个类似的函数,但我认为如果我正确理解您的问题,这是一个很好的起点。