javascript 如何制作带有div而不是图像的幻灯片？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21957530/
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 make slideshow with divs inside, not images?
提问by user3284652
I want to make a slideshow with javascript, but I only know how to do that with few images inside, but for my web I need to do slideshow in which I can put divs?
我想用 javascript 制作幻灯片，但我只知道如何用里面的几张图片来做，但是对于我的网站，我需要做幻灯片，我可以在其中放置 div？
I only need two slides, in every slide are 3 divs, and that two slides change in left.
我只需要两张幻灯片，每张幻灯片都有 3 个 div，并且两张幻灯片在左边发生变化。
HTML
HTML
<div id="container" class="cont2">
<div id="box1" class="box">Div #1<div class="kkc"><p>Div Caption1</p></div></div>
<div id="box2" class="box">Div #2<div class="kkc"><p>Div Caption2</p></div></div>
<div id="box3" class="box">Div #3<div class="kkc"><p>Div Caption3</p></div></div>
CSS
CSS
#container {
position: absolute;
margin: 0px;
padding: 0px;
height: 304px;
width: 500px;
overflow: hidden;
background-color: white;
margin-top: 78px;
margin-left: 124px;
z-index: -1;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 0px;
margin-left: -25%;
z-index: -1;
cursor: pointer;
}
#box1 {
background-color: green;
left: -150%;
}
#box2 {
background-color: yellow;
left:50%;
}
#box3 {
background-color: red;
left: 150%;
}
Javascript
Javascript
$(document).ready(function(){
var refreshId;
var restartAnimation = function() {
clearInterval(refreshId);
refreshId = setInterval( function()
{
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%'
}, 500 );
} else {
$(this).animate({
left: '-150%'
}, 500 );
}
});
},1000);
}
restartAnimation()
});
I've try this but its not working.
我试过这个，但它不工作。
回答by ??q?? zo???
JS:
JS：
function Divs() {
var divs= $('#parent div'),
now = divs.filter(':visible'),
next = now.next().length ? now.next() : divs.first(),
speed = 1000;
now.fadeOut(speed);
next.fadeIn(speed);
}
$(function () {
setInterval(Divs, 1400);
});
CSS:
CSS：
#parent div {
display:none;
position: absolute;
top: 0;
left: 0;
}
#parent div:first-child {
display:block;
}
div{background:red}
#parent > div{
width:400px;
height:250px;
}
HTML:
HTML：
<div id="parent">
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
