jquery圖像滑塊循環再次顯示最後一個圖像後的所有圖像

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

如果你想想看，這是有道理的，因爲左屬性插回0 ，所以slider倒退。要快速解決您的問題是表示第一圖像時，在你的anim功能使得這種變化明確的復位添加到0：

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

唯一的問題是，幻燈片不能自然復位時的動畫，但這將需要對您的邏輯進行相當大的更改。不過，我認爲這解決了你眼前的問題。

如果您有興趣構建更強大的解決方案，請告訴我，我可以幫助您構建一個簡單的概念驗證。