我已经构建了一个滑块,我可以在其中单击图像并向前移动。我正在尝试添加“下一个”和“上一个”按钮,但遇到了麻烦。任何帮助表示赞赏!
这是我在哪里的演示...... JSFiddle
<div id="container">
<div class="next">Next</div>
<div class="prev">Previous</div>
<div id="image1" class="box">Orange</div>
<div id="image2" class="box">Blue</div>
<div id="image3" class="box">Green</div>
<div id="image4" class="box">Red</div>
<div id="image5" class="box">Yellow</div>
</div>
CSS
body {
padding: 0px;
}
.next {
width:100px;
height:50px;
}
.prev {
width:100px;
height:50px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
left: 150%;
top: 100px;
margin-left: -25%;
}
#image1 {
background-color: orange;
left: 50%;
}
#image2 {
background-color: blue;
}
#image3 {
background-color: green;
}
#image4 {
background-color: red;
}
#image5 {
background-color: yellow;
}
查询
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
</p>