jquery 图像 slider 循环再次显示最后一张图像之后的所有图像

Question

我创建了一个 float 图像 slider 库:左和溢出:隐藏。每 3 秒就有一张图片向左滑动。 slider 可以工作，但我有一个问题:当我到达最后一张图像时，它会通过向右移动返回到第一张图像并显示该移动中的所有图像。

有没有办法隐藏它们？

HTML:

    <div id="gal">
        <div id="gal-overflow">
            <div id="slider">
                <img id="first-image" src="images/kinder.jpg">
                <img src="images/evadesign-accessori.jpg">
                <img src="images/evadesign-accessori.jpg">
                <img id="last-image" src="images/lora-swisera.jpg">
            </div>
        </div>

        <div id="prev"><</div>
        <div id="next">></div>

        <div id="gal-nav"></div>

    </div>   

CSS:

#gal{   
position:relative;
width:700px;
height:400px;
box-shadow: rgba(0, 0, 0, 0.6) 0px 1px 4px 0px;
border:2px solid #fff;
}

#gal-overflow{  
position:relative;
overflow:hidden;
width:700px;
height:400px;
}

#slider{
position:absolute;
left:0;
}

#slider img{
float:left;
}

#prev, #next{
cursor:pointer;
width:50px;
line-height:50px;
background:grey;
position:absolute;
opacity:0.5;
position:absolute;
top:170px;
text-align:center;
display: inline-block;
vertical-align: middle;
color:#000;
font-size:40px;
-webkit-border-radius:25px;
        border-radius:25px;

}

#prev:hover, #next:hover{
opacity:0.8;
}

#prev{
left:0px;
}

#next{
right:0px;
}

#gal-nav{
position:absolute;
bottom:10px;
width:700px;
height:25px;
text-align:center;
}

#gal-nav span{
font-size:20px;
cursor:pointer;
color:#49c;
opacity:0.6;
background:grey;
margin:0 3px;
display:inline-block;
width:25px;
height:25px;
text-align:center;
-webkit-border-radius:40px;
        border-radius:40px;
}

#gal-nav span:hover{
opacity:0.8;
}

#gal-nav span.active{
opacity:0.8;
background:#49c;
color:#fff;


}

body{
background-color:#000;

}

J查询:

$(document).ready(function(){

var galW = $('#gal').width(), //700
 imgN = $('#slider img').length, //3
 count = 0,
 galInterval;

 for (i=0; i<imgN ;i++){

    $('<span />').appendTo('#gal-nav');
 }

 function anim (){

    $('#slider').stop().animate({left:-count*galW},800);
    $('#gal-nav span').removeClass('active').eq( count ).addClass('active');

 }
 anim();

function auto(){
    galInterval= setInterval(function(){

        $('#next').click();
    },3000);

}
auto();

$('#slider').width(galW*imgN);  
$('#prev, #next').click(function(){     

var myId = this.id=='next' ? count++ : count--;
        count = count== -1 ? imgN-1 : count%imgN;
        anim();
    }); 
    $('#gal-nav span').click(function(){    
        count = $(this).index();
        anim();
    }); 
    $('#gal').on('mouseenter mouseleave', function (e){

        if (e.type=='mouseenter'){
            clearInterval(galInterval);
        }else{
            auto();
        };          
    });     
});

Answer 1

如果你仔细想想，这是有道理的，因为 left 属性被插值回 0，所以 slider 向后移动。快速解决您的问题的方法是在显示第一张图像时添加一个显式重置为 0，在您的 anim 函数中进行此更改:

if (count) {
    $('#slider').stop().animate({left:-count*galW},800);
} else {
    $('#slider').stop().css('left', 0);
}

唯一的问题是幻灯片在重置时不会自然地动画化，但这需要对您的逻辑进行相当大的更改。不过，我认为这可以解决您眼前的问题。

如果您有兴趣构建更强大的解决方案，请告诉我，我可以帮助您构建简单的概念验证。