<分区>
我想用 javascript 制作幻灯片，但我只知道如何在里面放几张图片，但是对于我的网站，我需要制作可以放置 div 的幻灯片吗？
我只需要两张幻灯片，每张幻灯片中有3个div，并且那两张幻灯片在左边变化。
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
#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
$(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()
});
我已经尝试过了，但它不起作用。