jquery图像滑块循环再次显示最后一张图像之后的所有图像答案

【问题标题】：jquery image slider loop shows again all the images after the last imagejquery图像滑块循环再次显示最后一张图像之后的所有图像
【发布时间】：2013-07-17 23:40:16
【问题描述】：

我创建了一个幻灯片图片库浮动：左和溢出：隐藏。每 3 秒有一个图像向左滑动。滑块有效，但我有一个问题：当我到达最后一张图像时，它通过向右移动返回到第一张图像并显示此移动中的所有图像。

有没有办法隐藏它们？

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;

}

jquery：

$(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();
        };          
    });     
});

【问题讨论】：

标签： jquery css slider gallery slideshow

【解决方案1】：

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

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

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

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

【讨论】：

谢谢，您建议我如何构建滑块？