如何使用 jQuery / JavaScript 实现轮播效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14038155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement carousel effect using jQuery/JavaScript
提问by josh kugler
I found a JavaScript carousel here.
我在这里找到了一个 JavaScript 轮播。
When you click right or left button on the webpage, the page scrolls dynamically with animation, and the animation speed of title and the content is different.
I guess it can be done with jQuery or JavaScript.
当您在网页上单击右键或左键时，页面会随着动画动态滚动，标题和内容的动画速度不同。
我想它可以用 jQuery 或 JavaScript 来完成。
Using traditional JavaScript, it is very hard to implement this moving animation effect.
It is easy to implement it without the moving animation, but when it comes to implementation with the moving animation, I think it's very hard for me.
使用传统的JavaScript，很难实现这种移动的动画效果。
不用动动画就很容易实现，但是要用动动画来实现，我觉得对我来说很难。
I looked up jQuery APIs for the solution, but I still didn't get the idea. Could someone anyone give me a hint how to implement this effect?
我查找了解决方案的 jQuery API，但我仍然没有得到这个想法。有人可以给我提示如何实现这种效果吗？
回答by Tymek
Animation time is equal, but width of animating element is different. That's easy. Paralax-like slider.
动画时间相等，但动画元素的宽度不同。这很容易。类似视差的滑块。
Here's solution: http://jsfiddle.net/Tymek/6M5Ce/for example
这是解决方案：例如http://jsfiddle.net/Tymek/6M5Ce/
HTML
HTML
<div id="wrap">
<div id="controls">
<div class="prev">←</div>
<div class="next">→</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
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();
?
