jQuery 选择下一个和上一个 img

Question

我研究了一个小 jquery 函数，但我有点卡住了。我想要做的是当我单击下一个和上一个链接时，根据带有 class="clicked" 的 img 向我显示下一个和上一个 img。我知道我可以使用 find() 函数，但我真的不知道如何实现它。

HTML

            <div class="thumbs_img">
                <a href="#p" class="prev">Prev</a>
                <img src="images/single_slider1.png" class="gallerythumbnail">
                <img src="images/single_slider2.png" class="gallerythumbnail">
                <img src="images/single_slider3.png" class="gallerythumbnail">
                <img src="images/single_slider4.png" class="gallerythumbnail clicked">
                <img src="images/single_slider5.png" class="gallerythumbnail"> 
                <img src="images/single_slider6.png" class="gallerythumbnail"> 
                <img src="images/single_slider7.png" class="gallerythumbnail">
                <a href="#n" class="next">Next</a>
            </div>

Js

$(document).ready(function() {        
    $('.gallerythumbnail').click(function(){
        $('#homeprod').removeClass('clicked');
        $('.gallerythumbnail').removeClass('clicked');
        $(this).toggleClass('clicked');
    });

    $('.showimagediv').show();
    $('.gallerythumbnail').on('click', function() {
        var img = $('<img />', {src    : this.src,
                                'class': 'fullImage'
                  });

        $('.showimagediv').html(img).show();
    });
});

CSS

.showimagediv {
    display: none;
    width: 100%;
    height: 474px;
    background-color: #000;
}
.gallerythumbnail{
    margin-left: 5px;
    margin-right: 5px;
    width:80px; 
    height: 80px;
    cursor:pointer;
}
.slider_prod{
    border: 2px solid #000;   
}
.thumbs_img{
    margin-top: 10px;
}
.clicked {outline: 2px solid #fdb900;}
.fullImage{
    width: 750px;
    height: 474px;
}
.prev{
    background-image: url('images/arrow_left.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 20px;
    padding-right: 25px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-right: 3px;
}
.next{
    background-image: url('images/arrow_right.png');
    background-position: center center;
    background-repeat: no-repeat;
    padding-left: 25px;
    padding-right: 20px;
    padding-top: 30px;
    padding-bottom: 35px;
    margin-left: 3px;
}

http://jsfiddle.net/7mUmK/

Answer 1

当您在第一张图片上并单击“上一张”或在最后一张图片上并单击“下一步”时不会挂起浏览器的解决方案

$('.next').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:last"))
    {
        $('.clicked').next().click();
    }
});
    $('.prev').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:first"))
    {
        $('.clicked').prev().click();
    }
});

DEMO

如果碰巧你确实希望它在最终情况下循环

$('.next').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:last"))
    {
        $('.clicked').next().click();
    }
    else
    {
        $(".gallerythumbnail:first").click();
    }
});
    $('.prev').click(function(){
    if(!$(".clicked").is(".gallerythumbnail:first"))
    {
        $('.clicked').prev().click();
    }
    else
    {
        $(".gallerythumbnail:last").click();
    }
});

Answer 2

您可以分别在下一个/上一个点击按钮上触发.clicked元素的下一个/上一个图像元素点击。试试这个：

 $('.next').click(function(){
  if($('.clicked').next().is(':last'))
    $('.clicked').next().click();
 });
 $('.prev').click(function(){
  if($('.clicked').prev().is(':first'))
    $('.clicked').prev().click();
 });

Working Demo

Answer 3

这里有一个小提琴http://jsfiddle.net/keypaul/7mUmK/28/

$(".thumbs_img  a").click(function(e){
    var c = $(this).attr('class');
    skipImg(c);
    e.preventDefault();
});


function skipImg(c){
    var sel = $('img.clicked'),
        l = $('.thumbs_img img').length,
        n;
    if( c == "next"){
        n = $('.clicked').next();
        if(n.index() > l){
           n = $('.thumbs_img img').eq(0);
        }
    }else{
        n = $('.clicked').prev();
        if(n.index() <= 0){
            n = $('.thumbs_img img').eq(l - 1);
        }
    }
    n.addClass('clicked');
    sel.removeClass('clicked');
   //here call a function to change big img
}