如何使用jQuery / JavaScript實現輪播效果

Question

我在這里找到了一個JavaScript輪播。

當您單擊網頁上的向右或向左按鈕時，頁面會動態地滾動動畫，標題和內容的動畫速度也不同。
我想可以用jQuery或JavaScript來完成。

使用傳統的JavaScript，很難實現這種動畫效果。
沒有移動動畫很容易實現它，但是當涉及到動畫動畫的實現時，我覺得這對我來說很難。

我查找了jQuery API以獲得解決方案，但我仍然沒有理解。 有人可以給我一個如何實現這種效果的提示嗎？

Answer 1

動畫時間相等，但動畫元素的寬度不同。 這很容易。 類似Paralax的滑塊。

這是解決方案： http ： //jsfiddle.net/Tymek/6M5Ce/

HTML

<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();
​