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');

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

滑动动画的另一个小提琴：https://jsfiddle.net/88u56y9h/1/

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

1 个答案: