0

我目前正在构建一个 jquery 滑块。我将如何开始在连续循环上运行？我已经关注了这个帖子，它似乎也没有工作。有人可以指出我正确的方向吗？

这是我的代码和JSFiddle：

<style>
img {
    position:absolute;
    top:0px;
    left:0px;
}
#img {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999999;
}
#img1 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999;
}
#img2 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:99;
}
#content {
    height:350px;
    width:652px;
    position: relative
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div id="content">
  <div id="img1" style="background:url(scarf01.jpg);"></div>
  <div id="img2" style="background:url(scarf02.jpg);"></div>
</div>
<script>
$(document).ready(function () {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {


  });


});
</script>
4

4 回答 4

2

这将使其保持连续：

function animateThis() {
  $('#img1').delay(2000).animate(
     {"width": "0px"},
    1000, function() {
        $('#img2').css('z-index', '100');
        $('#img1').width(652).css('z-index', '99')
    });

$('#img2').delay(4000).animate(
    {"width": "0px"},
    1000, function() {  
        $('#img1').css('z-index', '100');
        $('#img2').width(652).css('z-index', '99'); 
        animateThis();
    });
}
$(document).ready(function () {
   animateThis();
});
于 2013-07-04T16:18:39.440 回答
1

http://jsfiddle.net/48yWZ/

试试这样的可能吗？

loopz(); //on load 

function loopz() {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000, function() {  
  });   

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {
    $('#img1').css("width", "652px");
   $('#img2').css("width", "652px");
loopz();

  });

}
于 2013-07-04T16:10:23.810 回答
1

你可以做 

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var fi=$('.im:first').css("z-index");
        var li=$('.im:last').css("z-index");
        var ne=$(this).next(".im");
        ne.css({"z-index":fi});
        $("#content").append(this);
        $(this).css({"width":"652px","z-index":li});
        play(ne);
   });
}

http://jsfiddle.net/zHxcw/16/为所有元素添加一个类以动画
更新 

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var ne=$(this).next(".im");
        $("#content").append(this);
        pos();
        $(this).css({"width":"652px"});         
        play(ne);
 });
}
function pos(){
    var maxz=999;
    $(".im").each(function(){
        $(this).css({"z-index":maxz});
        maxz--;
    });
}

http://jsfiddle.net/zHxcw/25/更多图片

于 2013-07-04T16:37:29.347 回答
1

将您的动画添加到您必须在最后一个动画完成后调用的函数中。

<script>
    $(document).ready(function () {
        runIt();
    });

    function runIt(){
        $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

        $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, runIt);
    }
</script>
于 2013-07-04T16:06:25.483 回答