如何使用jQuery/JavaScript实现旋转木马效果

Question

我找到了一个JavaScript旋转木马这里。

当您单击网页上的右或左按钮时，页面会动态地随动画滚动，标题和内容的动画速度也不同。

我想这可以用jQuery或JavaScript来完成。

使用传统的JavaScript，很难实现这种运动动画效果。

很容易实现它没有移动动画，但当涉及到实现与移动动画，我认为这是非常困难的。

我查找了解决方案的jQuery API，但我仍然没有得到这个想法。有人能告诉我如何实现这一效果吗？

Answer 1

动画时间相等，但动画元素的宽度不同。这很简单。类似Paralax的滑块。

下面是解决方案:例如，http://jsfiddle.net/Tymek/6M5Ce/

<div id="wrap">
    <div id="controls">
        <div class="prev">&larr;</div>
        <div class="next">&rarr;</div>
    </div>
    <div id="caption"><div class="pan">
        <div class="page"><h1>Lorem ipsum</h1></div>
        <div class="page"><h1>Litwo! Ojczyzno moja!</h1></div>
        <div class="page"><h1>Drogi Marszałku, Wysoka Izbo.</h1></div>        
    </div></div>

    <div id="content"><div class="pan">
        <div class="page"><p>Dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna.</p></div>
        <div class="page"><p>Ty jesteś jak zdrowie. Nazywał się przyciągnąć do domu, fortuny szczodrot objaśniają wrodzone wdzięki i musiał pochodzić od Moskwy szeregów które już bronić nie chciałby do sądów granicznych. Słusznie Woźny cicho wszedł służący, i gdzie panieńskim rumieńcem dzięcielina pała.</p></div>
            <div class="page"><p>PKB rośnie Nikt inny was nie trzeba udowadniać, ponieważ zakres i miejsce szkolenia kadry odpowiadającego potrzebom. Gdy za sobą proces wdrożenia i rozwijanie struktur powoduje docenianie wag istniejących kryteriów zabezpiecza.</p></div>
    </div></div>
</div>​

SCSS

$sliderwidth: 400px;

#wrap {
    padding: 1em;
    background: #333;
}

h1 {
    font-weight: bold;
}

#controls {
    clear: both;
    height: 1em;
    margin: 0 0 1em 0;
    div {
        float: left;
        margin: 0 0.5em 0 0;
        padding: 0.2em;
        color: #FFF;
        background: #000;
        cursor: pointer;
    }
}

#caption, #content {
    background: #EEE;
    width: $sliderwidth;
    position: relative;
    overflow: hidden;
    .pan {
        width: 10000px;
        position: static;
    }
    .page {
        width: $sliderwidth;
        float: left;
        h1, p {
            margin: 0.2em 0.5em;
        }
    }
}
#content {
    .page {
        margin-right: $sliderwidth;
    }
}
​

JS

var slider = {
    length: parseInt($("#caption .page").length),
    current: 1,
    width: $("#caption").width(),
    next: function(){
        if(this.current < this.length){
            this.current = this.current + 1;
            this.animation();
        } else {
            this.current = 1;
            this.animation();
        }
    },
    animation: function(){
        var target = (0 - this.width) * (this.current - 1);
        this.run("#caption", target);
        target = target * 2;
        this.run("#content", target);
    },
    prev: function(){
        if(this.current > 1){
            this.current = this.current - 1;
            this.animation();
        } else {
            this.current = this.length;
            this.animation();
        }
    },
    run: function(part, target){
        $(part + " .pan").stop().animate(
            {"margin-left": target},
            1000
        );
    },
    initialize: function(){
        $("#controls .next").click(function(){slider.next();});
        $("#controls .prev").click(function(){slider.prev();});
    }
}

slider.initialize();
​