如何使用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(); 
​