-1

これを使用して、スライド ショー内で div を移動しています。問題は、各画像のキャプションが同じ場所 (各 div) から始まる各画像の左から右に移動する必要があることです。このコードを使用すると、div は必要に応じて移動しますが、次の div は最後の div が配置されたポイントから移動します。

$("#elementId").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

念のため、説明を難しくしています。

スライドショーがあり、各画像がフェードインし、1秒後に各画像の上にテキストが表示されるdivが表示され、divは左から右に移動する必要があります。ただし、上記のコードを使用すると、div が移動しますが、次の画像がフェードインするとすぐに、div は前の div があった最後の位置から移動します。

div を 0 または元の位置から再び「移動」させるにはどうすればよいですか?

リクエストされたコードの編集:

    <script type="text/javascript">
    // Speed of the automatic slideshow
    var slideshowSpeed = 6000;

    // Variable to store the images we need to set as background
    // which also includes some text and url's.


    var photos = [ {
            "title" : "First Tag line :",
            "image" : "/images/chrysanthemum-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "First Tag line :",
            "secondline" : "Second Tag line"
        }, {
            "title" : "Some text",
            "image" : "/images/tulips-oop-ll-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Some text",
            "secondline" : "Alternative text"
        }, {
            "title" : "Npthing Here",
            "image" : "/images/koala-266x200.jpg",
            "url" : "http://www.gyms-ireland.com",
            "firstline" : "Npthing Here",
            "secondline" : "Also nothing here",
        }, {
            "title" : "Office Appartments",
            "image" : "/images/work.jpg",
            "url" : "http://www.sxc.hu/photo/1265695",
            "firstline" : "Or still busy at",
            "secondline" : "work?"
        }
    ];

    jQuery(document).ready(function() {

        // Backwards navigation
        jQuery("#back").click(function() {
            stopAnimation();
            navigate("back");
        });

        // Forward navigation
        jQuery("#next").click(function() {
            stopAnimation();
            navigate("next");
        });

        var interval;
        jQuery("#control").toggle(function(){
            stopAnimation();
        }, function() {
            // Change the background image to "pause"
            jQuery(this).css({ "background-image" : "url(images/btn_pause.png)" });

            // Show the next image
            navigate("next");

            // Start playing the animation
            interval = setInterval(function() {
                navigate("next");
            }, slideshowSpeed);
        });


        var activeContainer = 1;    
        var currentImg = 0;
        var animating = false;
        var navigate = function(direction) {
            // Check if no animation is running. If it is, prevent the action
            if(animating) {
                return;
            }

            // Check which current image we need to show
            if(direction == "next") {
                currentImg++;
                if(currentImg == photos.length + 1) {
                    currentImg = 1;
                }
            } else {
                currentImg--;
                if(currentImg == 0) {
                    currentImg = photos.length;
                }
            }

            // Check which container we need to use
            var currentContainer = activeContainer;
            if(activeContainer == 1) {
                activeContainer = 2;
            } else {
                activeContainer = 1;
            }

            showImage(photos[currentImg - 1], currentContainer, activeContainer);

        };

        var currentZindex = -1;
        var showImage = function(photoObject, currentContainer, activeContainer) {
            animating = true;

            // Make sure the new container is always on the background
            currentZindex--;

            // Set the background image of the new active container
            jQuery("#headerimg" + activeContainer).css({
                "background-image" : "url(" + photoObject.image + ")",
                "display" : "block",
                "z-index" : currentZindex
            });

            // Hide the header text
            jQuery("#headertxt").css({"display" : "none"});

            // Set the new header text
            jQuery("#firstline").html(photoObject.firstline);
jQuery("#firstline").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 4000, function() {
        //Complete
    }
);
            jQuery("#secondline")
                .attr("href", photoObject.url)
                .html(photoObject.secondline);
            jQuery("#pictureduri")
                .attr("href", photoObject.url)
                .html(photoObject.title);


            // Fade out the current container
            // and display the header text when animation is complete
            jQuery("#headerimg" + currentContainer).fadeOut(function() {
                setTimeout(function() {
                    jQuery("#headertxt").css({"display" : "block"});
                    animating = false;
                }, 500);
            });
        };

        var stopAnimation = function() {
            // Change the background image to "play"
            jQuery("#control").css({ "background-image" : "url(images/btn_play.png)" });

            // Clear the interval
            clearInterval(interval);
        };

        // We should statically set the first image
        navigate("next");

        // Start playing the animation
        interval = setInterval(function() {
            navigate("next");
        }, slideshowSpeed);

    });</script>

HTML

<div id="headerimgs">
    <div id="headerimg1" class="headerimg"></div>
    <div id="headerimg2" class="headerimg"></div>
</div>

<!-- Slideshow controls -->

<!-- jQuery handles for the text displayed on top of the images -->
<div id="headertxt">
    <p class="caption">
        <span id="firstline"></span>
        <a href="#" id="secondline"></a>
    </p>
    <p class="pictured">
        Pictured:
        <a href="#" id="pictureduri"></a>
    </p>
</div>

CSS

#header {
    height: 220px;
    width: 520px;
}
.headerimg {
    background-position: center top;
    background-repeat: no-repeat;
    height: 220px;
    position: absolute;
    width: 520px;
}

#headertxt {
    clear: both;
    margin: 0 auto;
    position: relative;
    top: 50px;
    width: 520px;
}
#firstline {
    color: #333333;
    display: block;
    float: left;
    font-size: 25px;
    margin: 10px 10px 0 0;
    padding: 10px;
    marginLeft:0px !important;
}
#secondline {
    clear: both;
    color: #CD2B3A;
    display: block;
    float: left;
    font-size: 40px;
    margin: 10px 30px 0;
    padding: 15px 10px;
    text-decoration: none;
}
#headerimgs a {
    text-indent: -999999px;
}

.new {
    display: block;
    height: 220px;
    position: absolute;
    width: 520px;
}
#secondline:hover { text-decoration:underline; color:#7F000C; }

.pictured {
    background-color: #CC3333;
    clear: both;
    color: #FFFFFF;
    display: block;
    float: right;
    font-size: 12px;
    margin-top: 10px;
    padding: 9px 16px;
}
4

2 に答える 2

5

質問から判断するのは難しいですが、同じものを再利用するdiv場合は、リセットする必要がありますmarginLeft。例えば：

$("#elementId").css("marginLeft", "0").animate({
        marginLeft: "-=100"
    }, 1000, function() {
        //Complete
    }
);

（もちろん、開始点を使用するべきではない場合は0、を使用します10px。）アニメーションが完了する前にこれを呼び出す場合に備えて、そこにスローすることもstopできますが、それはコードの残りの部分が何をしているかによって異なります。

実例| ソース：

HTML：

<div id="elementId">I'm the div</div>
<button id="theButton">Click me</button>

JavaScript：

jQuery(function($) {

  $("#theButton").click(function() {
    $("#elementId").stop().css("marginLeft", "0").animate({
            marginLeft: "-=100"
        }, 1000, function() {
            //Complete
            display("Done, click the button again to see the repeat");
        }
    );
  });

  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }

});
于 2012-05-14T07:31:25.880 に答える
0

OK、これは解決済みですが、jQuery Cycleプラグインを使用していたはずです。はるかに簡単です。あなたは私のウェブサイトで実際にそれを見ることができます.

于 2012-05-14T09:27:30.480 に答える