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

できるよ 

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/すべての要素にクラスを追加して
UPDATE をアニメーション化する

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

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

最後のアニメーションが終了した後に呼び出す必要がある関数にアニメーションを追加します。

<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 に答える