javascript - 创建具有从左到右动画的幻灯片？

标签 javascript jquery jquery-animate slideshow

我有以下代码

$(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>

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

最佳答案

替换此行

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

有了这个

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

在这里摆弄:https://jsfiddle.net/nu5j2dyr/

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

关于javascript - 创建具有从左到右动画的幻灯片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29203022/