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

Question

我發現一個JavaScript輪播here。

當您點擊網頁上的右鍵或左鍵時，頁面會隨着動畫動態滾動，而標題和內容的動畫速度也會不同。
我想可以用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(); 
​