创建从左到右动画的幻灯片？

Question

我有以下代码

$(function(){   
    setInterval(function () {
        $('#slider').animate({left: 0}, 500, function () {
            $('#slider img:first-child').appendTo('#slider');
            $('#slider img').css('left', '');
    
        });
     }, 1000);
});

#slider {
    position: relative;
    overflow: hidden;
    margin: 20px auto;
    width: 500px;
    height: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slider">
    <img src="http://www.gettyimages.in/CMS/StaticContent/1391099215267_hero2.jpg"></img>
    <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/109720793.jpg"></img> 
    <img src="http://www.gettyimages.in/CMS/Pages/RoyaltyFree/StaticContent/108114205.jpg"></img>
</div>

图像切换但不滑动它们只是相互替换。我做错了什么？

Answer 1

替换此行

$('#slider img').css('left', '');

有了这个

$('#slider').css('left', '0');

fiddle 这里：https://jsfiddle.net/nu5j2dyr/

另一个fiddle用于滑动动画：https://jsfiddle.net/88u56y9h/1/

创建从左到右动画的幻灯片？

Creating a slideshow with left to right animation?

javascript

jquery

jquery-animate

slideshow