0
我已经构建了一个滑块,可以单击图像并向前移动。我正在尝试添加Next和Previous按钮,但遇到了麻烦。任何帮助表示赞赏!Jquery滑块下一个/上一个按钮
下面是我在哪里演示... 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;
}
JQUERY
$('.box').click(function() {
$(this).animate({
left: '-50%'
}, 500, function() {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$(this).next().animate({
left: '50%'
}, 500);
});
谢谢你的答复。但是,我试图保留图片来自屏幕外的幻灯片效果。我已经能够得到它,但是,一次无法让一张图像滑动...请看看这里:http://jsfiddle.net/coltanious/dRGKH/ – 2012-08-06 22:48:51
@WoolfFaulkner cooleos man will在这个效果问题上回到你身边,同时继续玩下去应该是直接fwd,':)' – 2012-08-06 23:56:17