Question

我创建了一个浮动图库float：left和overflow：hidden。每隔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();
        };          
    });     
});

Answer 1

如果你考虑一下，这是有道理的，因为left属性被插值回0，所以slider向后移动。快速解决您的问题是在显示第一张图片时将显式重置添加到0，在anim函数中进行此更改：

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

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

告诉我你是否有兴趣构建一个更强大的解决方案，我可以帮助你构建一个简单的概念证明。

jquery图像滑块循环再次显示最后一个图像后的所有图像

1 个答案: