Question

我有一个我想循环的图像列表。我正在尝试找到正确的方法来完成我的任务：1）在第一次点击下一个箭头，第二个后，在我的

2列表中淡入NEXT箭头和第一个图像当用户点击NEXT箭头并且到达LAST

时，

淡入并且上一个箭头淡入3），点击上一个箭头后点击下一个箭头将淡出4）并且首先

<到达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

选择点击竞技场，首先img有Class，例如活性。单击“获取下一个元素后，使用活动类”。淡出一个和新的。从选定中删除活动并将其分配给新的。

我在火车上，从我的Handy打字。所以我不能给你豁免代码。 SRY

<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');
    });

}）;

从上一个img添加一个if do Start。喜欢：如果没有下一个img去.container：首先有些像这样。花了我写的。很难在Handy hahaha上编写源代码

jquery;单击函数循环<li> <img/> </li>

1 个答案: