圖像滑塊滑入/滑出

Question

我試圖讓第一張圖像滑出第二張圖片，第二張圖片滑出，第三張圖片滑入等等，因爲代碼代表每張圖片滑出精細但漸漸消失而不是滑動。

var s = 0, 
    t = 2000; 

$(document).on('ready', slide); 

function slide(){ 
var speed = setInterval(slider, t); 
} 

function slider(){ 
s++; 
var sld = $('#slider img'), 
    imgs = sld.length; 
if(s == imgs){ 
s = 0; 
} 

sld.animate({'marginLeft': '+=750px'}, t).fadeOut('fast').animate({'marginLeft': '-=750px'}, t).eq(s).fadeIn(t); 
} 

jFiddle Demo

Answer 1

更換.fadeOut/.fadeIn我們應該使用一個無序列表（<ul>）首先改了一下結構：

<div id="slider"> 
    <ul> 
     <li><img src="http://placehold.it/750x250/75c8c8/fff&text=1"></li> 
     <li><img src="http://placehold.it/750x250/b775c8/fff&text=2"></li> 
     <li><img src="http://placehold.it/750x250/c8bd75/fff&text=3"></li> 
     <li><img src="http://placehold.it/750x250/c87575/fff&text=4"></li> 
    </ul> 
</div>​ 

然後我們應該使用setTimeout()而不是一個的setInterval所以可以肯定，一旦動畫完成下一張幻燈片啓動：

var s = 0, 
    t = 2000, 
    timer; 

$(document).on('ready', slide); 

function slide(){ 
    timer = setTimeout(slider, t); 
} 

function slider(){ 
    s++; 
    var sld = $('#slider li'), 
    imgs = sld.length; 
    if(s == imgs){ 
     s = 0; 
    } 
    sld.eq(s-1).animate({'left': '750px'}, t, function() { 
     sld.eq(s).animate({'left': '0px'}, t, function() { 
      speed = setTimeout(slider, t); 
     }); 
    }); 
} 

這種方式，我們函數再次滑動肖像權，那麼下一個左最後調用`滑塊（）超時。

爲了使這項工作，我們需要改變的CSS代碼：

#slider { 
    height:250px; 
    width:750px; 
    margin:20px auto; 
} 

#slider ul { 
    width: 100%; 
    height: 100%; 
    list-style: none; 
    overflow: hidden; 
    border: 1px solid grey; 
    position: relative; 
} 

#slider​ ul li { 
    position: absolute; 
    left: 750px; 
} 

#slider ul li​:first-child { 
    left: 0px; 
}​ 

在這裏你可以看到一個DEMO

Answer 2

嘗試使用.slideToggle

sld.animate({'marginLeft': '+=750px'}, t) 
    .slideToggle('fast') 
    .animate({'marginLeft': '-=750px'}, t) 
    .eq(s) 
    .slideToggle(t);