jQuery div中的jquery幻灯片div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15338054/
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
jquery slide div within a div
提问by Zbarcea Christian
I have a container div element, this should contain all child div elements. I saw this thread: Slide a div offscreen using jQueryand I was wondering how to implement it (within a div element and not in the body). The code is working fine, but what if the "wrapper" div element has 500px width, how am I supposed to wrap the child divs? Am I need to use iframe or ...?
我有一个容器 div 元素，它应该包含所有子 div 元素。我看到了这个线程：Slide a div offscreen using jQuery我想知道如何实现它（在 div 元素中而不是在正文中）。代码工作正常，但是如果“包装器”div 元素的宽度为 500 像素，我应该如何包装子 div 呢？我需要使用 iframe 还是...？
For a better understanding I made this image:
为了更好地理解，我制作了这张图片：
The red rectangle would be a window and the grey background the wall. You can only see trough the window and see the current div element. If you push the right button -aqua- you will see the green div and if you push the left button you will see the yellow div.
红色矩形是一扇窗户，灰色背景是墙壁。您只能通过窗口查看并查看当前的 div 元素。如果您按下右侧按钮 -aqua-，您将看到绿色 div，如果您按下左侧按钮，您将看到黄色 div。
Notice: Div elements should move and not the wall.
注意： Div 元素应该移动，而不是墙。
回答by Roko C. Buljan
jQuery for the logic and CSS3 for transitionand transform.
Multiple galleries + Auto-slide + Pause on hover:
用于逻辑的 jQuery 和用于transition和的CSS3 transform。
多个画廊 + 自动滑动 + 悬停暂停：
$(function(){
$('.gallery').each(function() {
var $gal = $(this),
$movable = $(".movable", $gal),
$slides = $(">*", $movable),
N = $slides.length,
C = 0,
itv = null;
function play() { itv = setInterval(anim, 3000); }
function stop() { clearInterval(itv); }
function anim() {
C = ($(this).is(".prev") ? --C : ++C) <0 ? N-1 : C%N;
$movable.css({transform: "translateX(-"+ (C*100) +"%)"});
}
$(".prev, .next", this).on("click", anim);
$gal.hover(stop, play);
play();
});
});.gallery{
position: relative;
overflow: hidden;
}
.gallery .movable{
display: flex;
height: 70vh;
transition: transform 0.4s;
}
.gallery .movable > div {
flex:1;
min-width:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Pause on hover and autoslide
<div class="gallery">
<div class="movable">
<div style="background:#0af">1 <p style="position:absolute; top:400px;">aaaa</p></div>
<div style="background:#af9">2</div>
<div style="background:#f0a">3</div>
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
As many galleries as you wantCount the number of slides and put into a counterC.
On prev/next click manipulate C
On autoslide $(this).is(".prev")will also evaluate as falseso ++Cwill be used, just like clicking the Nextbutton.
On mouseenter simply clearIntervalthe currently running itvand on mouseleave (the second .hoverargument) reinitialize the itv
计算幻灯片的数量并放入计数器C。
在上一页/下一页点击操作C
上autoslide$(this).is(".prev")还将评估为false使++C将被使用，就像单击下一步按钮。
在 mouseenter 上只是clearInterval当前正在运行itv和在 mouseleave（第二个.hover参数）上重新初始化itv
The animation is achieved by multiplying C*100 and translateXby - C * 100 %
动画是由C *乘以100，并取得translateX由- C * 100 %
回答by kingdomcreation
Add all three div in a container div, then make the window wrap around the long div and hide the overflow.
将所有三个 div 添加到一个容器 div 中，然后让窗口环绕长 div 并隐藏溢出。
Example if the window area is 960px then the div inside would be 3x 960 (2880)
例如，如果窗口区域是 960px，那么里面的 div 将是 3x 960 (2880)
You can center it by changing it's left position by increments of 960 (placing the long div in relative positioning and the window to overflow to hidden)
您可以通过以 960 为增量更改其左侧位置来将其居中（将长 div 置于相对位置，并将窗口溢出到隐藏）
#window{
width:960px;
overflow: hidden;
}
#container{
position: relative;
left: -960px;
}
.content_box{
width:960px;
}
Then you can use javascript (jQuery) to animate the left position:
然后您可以使用 javascript (jQuery) 为左侧位置设置动画：
$('#arrow-left').click(function() {
$('#container').animate({
left: '-=960'
}, 5000, function() {
// Animation complete.
});
});
$('#arrow-right').click(function() {
$('#container').animate({
left: '+=960'
}, 5000, function() {
// Animation complete.
});
});
More on .animate can be found in the manual: http://api.jquery.com/animate/
更多关于 .animate 的信息可以在手册中找到：http://api.jquery.com/animate/
回答by razz
<div id="parent">
<div id="container">
<div id="child1"></div>
<div id="child2"></div>
</div>
</div>
give the parent red div css properties:
给父红色 div css 属性：
position: relative;
overflow: hidden;
width: 500px;
height: somevalue;
wrap the children divs with another div "container for example" and give it the following css properties:
用另一个 div“例如容器”包装子 div，并为其提供以下 css 属性：
position: absolute;
width: ;/*overall width of all children divs including margins*/
top: 0;
left: 0;
height: ;/*same as parent*/
and finally for children divs:
最后是儿童 div：
float: left;
height: ;/*same as parent*/
