[英]How do I add buttons to my Javascript/Jquery Slider?
所以我有一個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); });
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.