非常简单的 jQuery Div 滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8627997/
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
Very Simple jQuery Div Slider
提问by Extelliqent
I would like to put 5 divs on my page but width of the page doesn`t let me do it. So I thought I can show only 3 of them and people who wants to see other ones can click right-left arrows to see. I want it to work that way very simple. Anybody has an idea of the best way to do it ?
我想在我的页面上放置 5 个 div，但页面的宽度不允许我这样做。所以我想我只能显示其中的 3 个，想看其他的人可以单击左右箭头查看。我希望它以非常简单的方式工作。任何人都知道最好的方法吗？
回答by user1728278
Here is how to do so, by using jQuery.DIYslider, a lightweight and customizable jQuery slider.
这是通过使用jQuery.DIYslider来实现的方法，这是一个轻量级且可自定义的 jQuery 滑块。
Demonstrationof the following code: http://jsfiddle.net/bj4yZ/155/
演示如下代码：http: //jsfiddle.net/bj4yZ/155/
You'll notice this plugin makes it extremely easy to do whatever you want to do.
你会注意到这个插件可以让你做任何你想做的事情变得非常容易。
You'll find all of this plugin's options, methods and events on the page linked above.
您可以在上面链接的页面上找到该插件的所有选项、方法和事件。
HTML
HTML
<button id="go-left">«</button> <button id="go-right">»</button>
<div class="slider"><!-- The slider -->
<div><!-- A mandatory div used by the slider -->
<!-- Each div below is considered a slide -->
<div class="a">Div #1</div>
<div class="b">Div #2</div>
<div class="c">Div #3</div>
<div class="d">Div #4</div>
<div class="e">Div #5</div>
</div>
</div>
JavaScript
JavaScript
$(".slider").diyslider({
width: "400px", // width of the slider
height: "200px", // height of the slider
display: 3, // number of slides you want it to display at once
loop: false // disable looping on slides
}); // this is all you need!
// use buttons to change slide
$("#go-left").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "back");
});
$("#go-right").bind("click", function(){
// Go to the previous slide
$(".slider").diyslider("move", "forth");
});
回答by devric
wouldn't be hard for you to code at all, so theory goes like this
对你来说根本不难编码，所以理论是这样的
html structure
html结构
.outter-container
.inner container
.slide slide1
.slide slide2
.slide slide3
.slide slide4
.slide slideX
- get window width, slide width
- window width / 3 = slide width ( to make it easier, always 3 slides at once)
- index each slides, than apply index * slide width ( this equal to horizontal position )
- set the outter container to position relative, width=window width, overflow=hidden, and inner container to position absolute, left:0, top:0 and slides to position:absolute
- set the each slides css left: index*width (point 3)
- there you go, successfully hide the other slides, time to interaction
- next.click -> slide animate inner container left: -= slide.width (opposite for left.click)
- and show/hide left/right button if inner-container is left = 0 else.... to disable people clicking when no more slides are hidden
- 获取窗口宽度，幻灯片宽度
- 窗口宽度 / 3 = 幻灯片宽度（为方便起见，始终一次 3 张幻灯片）
- 索引每张幻灯片，然后应用索引 * 幻灯片宽度（这等于水平位置）
- 将外部容器设置为相对位置，宽度=窗口宽度，溢出=隐藏，内部容器设置为绝对位置，左：0，顶部：0并滑动到位置：绝对
- 将每个幻灯片的 css 设置为左侧：index*width（第 3 点）
- 好了，成功隐藏其他幻灯片，是时候进行交互了
- next.click -> 向左滑动内部容器动画：-= slide.width（与 left.click 相反）
- 并显示/隐藏左/右按钮，如果内部容器为左 = 0 否则......当没有更多幻灯片被隐藏时禁用人们点击
