jquery;click函数循环遍历<li><img>

Question

我有一个要循环浏览的图像列表。我试图找到正确的方法来完成我的任务:1)在我的

列表中的 NEXT 箭头和第一张图像中淡出 2)在第一次单击 NEXT 箭头后，第二个

淡入且 PREVIOUS 箭头淡入 3) 当用户单击 NEXT 箭头并到达 LAST

时，NEXT 箭头将淡出 4) 单击 PREVIOUS 箭头后单击 FIRST

< li> 到达时，PREVIOUS 箭头将淡出。我的代码重复不需要重复的命令，我只是在创建正确的循环时遇到了问题。

我的 html 是:

<div id="fullImage"></div>
                <div id="imageBlock">
                    <a href="javascript:void(0);" id="logoDiscovery" title="click to enlarge"><img src="images/logoDiscovery_T.png"/></a>
                    <a href="javascript:void(0);" id="logoGoulds" title="click to enlarge"><img src="images/logoGoulds_T.png"/></a>
                    <a href="javascript:void(0);" id="logoMayer" title="click to enlarge"><img src="images/logoMayer_T.png"/></a>
                    <a href="javascript:void(0);" id="logoNorthwest" title="click to enlarge"><img src="images/logoNorthwest_T.png"/></a>
                    <a href="javascript:void(0);" id="logoPriscilla" title="click to enlarge"><img src="images/logoPriscilla_T.png"/></a>
                    <a href="javascript:void(0);" id="logoSohier" title="click to enlarge"><img src="images/logoSohier_T.png"/></a>
                    <a href="javascript:void(0);" id="logoSierra" title="click to enlarge"><img src="images/logoSierra_T.png"/></a>
                    <a href="javascript:void(0);" id="logoUltimate" title="click to enlarge"><img src="images/logoUltimate_T.png"/></a>
                    <a href="javascript:void(0);" id="logoTaylor" title="click to enlarge"><img src="images/logoTaylor_T.png"/></a>
                </div>
                <div class="media">
                    <div class="navigation">
                        <div class="prev">
                           <img src="../images/arrowLeft.png" alt="Previous"/>
                        </div>
                        <div class="next">
                           <img src="../images/arrowRight.png" alt="Next"/>
                        </div>
                    </div>
                    <ul class="gallery">
                        <li><img src="images/logoDiscovery_M.png" class="full logo" style="margin-top:0;"/></li>
                        <li><img src="images/logoGoulds_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoMayer_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoNorthwest_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoPriscilla_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoSohier_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoSierra_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoUltimate_M.png" class="full logo" style="margin-top:0"/></li>
                        <li><img src="images/logoTaylor_M.png" class="full logo" style="margin-top:0"/></li>                        
                    </ul>
                </div><!--end media-->

我的 CSS 是:

div.navigation {
display:block;
position:absolute;
width:845px;
height:140px;
margin-left:-280px;
bottom:0;
}

div.navigation .next {
position:relative;
display:none;
float:right;
height:140px;
width:50px;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
cursor:pointer;
}

div.navigation .prev {
position:relative;
display:none;
float:left;
height:140px;
width:50px;
opacity: 0.35;
filter: alpha(opacity = 35);
-moz-opacity: 0.35;
zoom: 1;
cursor:pointer;
}

#fullImage {
position:relative;
display:none;
width:100%;
height:399px;
margin-top:40px;
overflow:visible;
}

div.img-wrap {
display:none;
padding: 0 0 10px;                
}

ul.gallery {
display:none;
margin:0;
}

ul.gallery img.logo,#fullImage img {
margin-left:-150px;
}
.gallery li{display:none; list-style:none;}
.gallery li:first-child {display:block;}

div.media {
position:relative;
right:0;
margin-top:40px;
width:100%;
height:0;
}

我的 JS 是:

var speed = 500;

    $(".prev").click(function() {       
        $("#fullImage").hide();
        $(".gallery").show();       
        var now = $(this).parent().next("ul.gallery").children(":visible"),
            last = $(this).parent().next("ul.gallery").children(":last"),
            prev = now.prev();
            prev = prev.index() == -1 ? last : prev;
        now.fadeOut(speed, function() {prev.fadeIn(speed);});
    });

    $(".next").click(function() {
        $(".prev").fadeIn();
        var height = $('#fullImage').height();
        $("#fullImage").hide();
        $(".gallery").show();
        $("div.media").height(height);
        //.gallery li:first-child {display:block;}
        var now = $(this).parent().next("ul.gallery").children(':visible'),
            first = $(this).parent().next("ul.gallery").children(':first'),
            next = now.next();
            next = next.index() == -1 ? first : next;
        now.fadeOut(speed, function() {
            next.fadeIn(speed);
        });
        //var first = $(this).parent().children(':first'),
        //    next = $(this).next();
        //    next = next.index() == -1 ? first : next;
        //$(this).fadeIn(speed, function() {next.fadeIn(speed);});
    });

    //$(".gallery li").click(function() {
    //    var first = $(this).parent().children(':first'),
    //        next = $(this).next();
    //        next = next.index() == -1 ? first : next;
    //    $(this).fadeOut(speed, function() {next.fadeIn(speed);});
    //});    

Answer 1

选择一个点击Arena，首先img有Class e.g.积极的。单击获取具有事件类的元素之后的下一个元素。淡出一个新的。从所选中删除事件并将其分配给新的。

我在 Train 的自动取款机上用 Handy 打字。所以我不能给你 Exempel 代码。对不起

<div class="container">
<img class="active" src="aaa.jpg" />
<img class="" src="bbb.jpg" />
<img class="" src="ccc.jpg" />
</div>

$(".container").on('click', function() {
    $('.active', function() {
        Var pre = $(this).fadeOut();
        Var next = $(this).next('img').fadeIn();
       pre.removeClass('active');
       next.addClass('active');
    });

});

添加一个 if do 从上一个 img 重新开始。 喜欢:如果没有下一个 img 去 .container:first 有些人喜欢这样。花了我 lang 来写。 Handy上很难写Sourcecode哈哈哈