jquery - 使用jquery以不同的间隔滑动图像

Question

我有一张很长的图片，需要在我创建的 HTML #container 中从左向右移动。

图像包含大约 4 幅画， slider 需要使用舒适的速度，并在其中一幅画位于中间时停止几秒钟。然后继续图像中的下一幅画。

它应该从单击按钮开始，并在可见的第一幅画上开始和结束

<div id="container">
    <img class="img" src="panorama.png"/>
</div>
<div id="start">
    <h2 class="text">Start</h2>
</div>

$(document).ready(function()
{
    $('#start').click(function()        
    {           
        var change_img_time     = 5000; 
        var transition_speed    = 100;      
        $('#container img');
        {

        }           
    });
});

Answer 1

我这样做了:FIDDLE :

---

javascript/jQuery:

---

$(document).ready(function(){

    // My controls (in miliseconds)
    var change_img_time  = 1000;
    var transition_speed = 1000;

    // Image properties
    var image = $("div#container > img.img");
    var aQuarter = image.width() / 4;
    var copyIMG = image.clone();
    image.after( copyIMG );
    copyIMG.css({
        "margin-top": 0 - image.innerHeight(),
        "margin-left": copyIMG.width()
    });
    image = image.add(copyIMG);
    var relative = $("<div>").css({
        "position": "relative",
        "padding": "0"
    });
    $("div#container").wrapInner(relative);

    // Setting container-div width and height
    $("div#container").css({
        "width": aQuarter,
        "height": image.height()
    });

    // Start-event
    $("div#start").on("click", function startImageEvent() {
        if (image.is(":animated")) return;
        image
            .animate({
                "margin-left": "-=" + aQuarter
            }, transition_speed)
            .delay(change_img_time)
            .animate({
                "margin-left": "-=" + aQuarter
            }, transition_speed)
            .delay(change_img_time)
            .animate({
                "margin-left": "-=" + aQuarter
            }, transition_speed)
            .delay(change_img_time)
            .animate({
                "margin-left": "-=" + aQuarter
            }, transition_speed, function(){
                image.not(copyIMG).css("margin-left", "0");
                copyIMG.css({"margin-left": copyIMG.width()});
                $("div#start").one("click", startImageEvent);
            });
    });

});

---

CSS 也很重要:

---

div#container {
    overflow: hidden;
    z-index: 2;
}
div#start {
    float: left;
    padding: 0 20px;
    margin: 30px;
    border: 1px dotted #f00;
    cursor: pointer;
}
div#container img.img {
    float: left;
}

---

我尽量使代码清晰易读，但如果您有任何疑问，请告诉我..

希望对您有所帮助。