jquery next previous 非预加载图像答案

【问题标题】：jquery next previous with non-preload imagejquery next previous 非预加载图像
【发布时间】：2013-02-09 00:15:38
【问题描述】：

我正在创建一个非常简单的图片库，它只加载图片库的第一张图片。用户需要单击缩略图才能查看图像。这是因为我为画廊使用了一张大图片，这样它就不必加载每张图片。现在我在创建下一个和上一个按钮时遇到问题。

这是加载图片的地方

<div class="entry-content">
<div class="img-box">
<img id="img-preview" src="#" >
</div>
</div>

这是分页

<div class="paginate">  
<a href="#" class="prev"></a>
<a href="#" class="next"></a>
</div>

这是缩略图所属的地方

<ul id="related-category"> 
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
<li class="photo"><a href="#" ></a></li>
</ul>

JQUERY

jqu(document).ready(function(){

jqu("#related-category li a").click(function(){

    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;
    
});

    jqu("a.next").click(function(){
    jqu(" li.photo").next("a");
});
    jqu("a.prev").click(function(){
    jqu("li.photo").prev("a");
});
});

我一直在寻找解决方案，但大多数滑块图像都是在滑块加载时预加载的，而我的则没有。

【问题讨论】：

jQuery 语言 == JavaScript 语言 :)

标签： jquery image slider gallery next

【解决方案1】：

.next() 和 .prev() 方法不会导致点击发生，它们会创建一个 jQuery 对象，该对象包含 DOM 中与当前元素处于同一级别的下一个或上一个元素。所以jqu("li.photo").next("a") 不会找到任何东西，因为没有与 li 元素处于同一级别的锚点，并且无论如何"li.photo" 选择了所有 li 元素。

我建议你在点击的 li 上设置一个标志（使用一个类）来记住它是哪个，然后你可以使用 that 元素中的.next() 和.prev()：

jqu("#related-category li a").click(function(){
    jqu("#related-category li").removeClass("selected");
    jqu(this).parent().addClass("selected");
    var largePath = jqu(this).attr("href");    
    jqu("#img-preview").attr({ src: largePath });
    return false;    
});

jqu("a.next").click(function(){
    jqu("li.selected").next().find("a").click();
});
jqu("a.prev").click(function(){
    jqu("li.selected").prev().find("a").click();
});

演示：http://jsbin.com/iruyap/1/edit

（注意：如果没有上一个或下一个项目，您可能希望在 prev 和 next 处理程序中添加一些代码来执行某些操作。）

【讨论】：