所以我有一个JavaScript / jQuery的形象滑块。 每个幻灯片是<div>元素,在div“容器”的子女。 每五秒钟,最后一张幻灯片向上滑动和。简单的东西,新的图像变淡。 这里是我的代码:
window.onload = function start() {
slide();
}
function slide() {
var num = 0;
window.setInterval(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = (num + 1) % 4;
$("#container div:eq(" + num + ")").fadeIn(450);
}, 5000);
所以,我需要做什么才能添加带你到下一张幻灯片和最后一张幻灯片按钮?
下一个:
$("#next").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = (num + 1) % 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
持续:
$("#last").click(function () {
$("#container div:eq(" + num + ")").slideUp(450);
num = 4;
$("#container div:eq(" + num + ")").fadeIn(450);
});
HTML:
<a id="next" href="#">next</a>
<a id="last" href="#">last</a>
JavaScript的:
$(document).ready(function () {
var cur = 0;
var slide = function (n) {
$("#container div:eq(" + cur + ")").slideUp(450);
cur = n;
$("#container div:eq(" + cur + ")").fadeIn(450);
)
setInterval(function () { slide((cur + 1) % 4); }, 5000);
$('#next').click(function () { slide((cur + 1) % 4); });
$('#last').click(function () { slide(3); });
});