通过jquery的prev/next方法滚动显示图片的问题

Equn 2012-07-22 07:39:52
通过jquery的prev/next方法获得上一个、下一个显示或隐藏的LI标签,再控制标签的CSS类来实现LI标签的滚动显示。
类似的代码我以前用过,是正常的。
今天用到一个新网站发现显示不正常,好像是prev/next方法无法正常获取元素,求指点。
测试网站:http://www.xdnz120.com/bb/4

HTML代码

<div id="smallpic">
<a href="javascript:viewPre()"><img src="images/left.gif" width="35" height="154" class="left" /></a>
<ul id="jinxuan">
<li class="view"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720115958.jpg')"><img src="/bb/upfile/2012720115958_f.jpg" /></a></li>
<li class="view"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720112159.jpg')"><img src="/bb/upfile/2012720112159_f.jpg" /></a></li>
<li class="view"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720114059.jpg')"><img src="/bb/upfile/2012720114059_f.jpg" /></a></li>
<li class="hide"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720115958.jpg')"><img src="/bb/upfile/2012720115958_f.jpg" /></a></li>
<li class="hide"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720112159.jpg')"><img src="/bb/upfile/2012720112159_f.jpg" /></a></li>
<li class="hide"><a href="javascript:void(0)" onclick="javascript:viewbig('/bb/upfile/2012720114059.jpg')"><img src="/bb/upfile/2012720114059_f.jpg" /></a></li>
</ul>
<a href="javascript:viewNext()"><img src="images/right.gif" width="35" height="154" class="left" /></a>
</div>


javascript代码:

function viewPre()
{
if ($("#jinxuan li.view").prev(".hide").length > 0)
{
var views = $("#jinxuan li.view");
var view = views[views.length - 1];
var prevview = $(view).prev(".hide");
prevview.removeClass("hide");
prevview.addClass("view");
$(view).removeClass("view");
$(view).addClass("hide");
}
}

function viewNext()
{
if ($("#jinxuan li.view").next(".hide").length > 0)
{
var view = $("#jinxuan li.view")[0];
var nextview=$(view).next(".hide");
nextview.removeClass("hide");
nextview.addClass("view");
$(view).removeClass("view");
$(view).addClass("hide");
}
}

function viewbig(file)
{
$("#bcimg").attr("src",file);
}

...全文
290 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Equn 2012-07-23
  • 打赏
  • 举报
回复
[Quote=引用 6 楼 的回复:]

JScript code
function viewPre() {
var v = $("#jinxuan li.view"), h = v.eq(0).prev();
if (h.size() > 0) {
h.attr('class', 'view');
v.filter(':last').attr('……
[/Quote]

非常感谢!
Go 旅城通票 2012-07-23
  • 打赏
  • 举报
回复
    function viewPre() {
var v = $("#jinxuan li.view"), h = v.eq(0).prev();
if (h.size() > 0) {
h.attr('class', 'view');
v.filter(':last').attr('class', 'hide');
}
}

function viewNext() {
var v = $("#jinxuan li.view"), h = v.filter(':last').next();
if (h.size() > 0) {
h.attr('class', 'view');
v.eq(0).attr('class', 'hide');
}
}
Equn 2012-07-23
  • 打赏
  • 举报
回复
[Quote=引用 4 楼 的回复:]

你是一次显示3张还是一张?看你的HTML结构是一次3张?
[/Quote]

html代码调整了一下。

正常显示的是4张,点向右的图片链接,左边第一张隐藏,右边显示一张新的,达到滚动显示的效果。
Go 旅城通票 2012-07-23
  • 打赏
  • 举报
回复
你是一次显示3张还是一张?看你的HTML结构是一次3张?
Equn 2012-07-23
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]

正确的啊 可以切换啊,,,,哪里不能获取 正常得很 ....楼主到底哪里有问题???可以站内信 我的测试环境 火狐
[/Quote]

底下的图片切换功能,不正常,会正常隐藏已显示的图片,但隐藏的图片不会正常显示。
d945332077 2012-07-23
  • 打赏
  • 举报
回复
正确的啊 可以切换啊,,,,哪里不能获取 正常得很 ....楼主到底哪里有问题???可以站内信 我的测试环境 火狐
Equn 2012-07-23
  • 打赏
  • 举报
回复
up,没人看到么? 求助。

87,904

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧