我正在尝试使用横幅滑块,jquery.currentBanner值增加和减少,当我点击按钮但横幅不变。
SCRIPT:
$(document).ready(function () {
var currentBanner = 0;
$("#prev").bind("click", function () {
currentBanner -= 1;
$("#banner_div img").eq(currentBanner).fadeIn("slow");
});
$("#next").bind("click",function () {
currentBanner += 1;
$("#banner_div img").eq(currentBanner).fadeIn("slow");
});
$("#banner_div img").eq(currentBanner).css("display", "block");
});
HTML:
<a href="#" id="next>next</a>
<a href="#" id="prev">prev</a>
<div id="banner_div">
<img src="image1.jpg" alt="" />
<img src="image2.jpg" alt="" />
<img src="image3.jpg" alt="" />
<img src="image4.jpg" alt="" />
</div>
答案 0 :(得分:3)
马上蝙蝠
<a href="#" id="next>next</a>
缺少id属性的结束引用:
<a href="#" id="next">next</a>
的 Here's a jsFiddle demo of what I would do 强> 的
<强>的jQuery 强>:
$(document).ready(function () {
var $images = $("#banner_div img"),
totalImages = $images.length,
currentIndex = 0;
$images.eq(currentIndex).fadeIn("slow");
$("#prev").on("click", function() {
if (currentIndex > 0) {
$images.eq(currentIndex).stop(true,true).hide(0);
currentIndex -= 1;
$images.eq(currentIndex).stop(true,true).fadeIn("slow");
}
});
$("#next").on("click",function () {
if (currentIndex < totalImages-1) {
$images.eq(currentIndex).stop(true,true).hide(0);
currentIndex += 1;
$images.eq(currentIndex).stop(true,true).fadeIn("slow");
}
});
});
<强> CSS 强>:
#banner_div img { display: none; }
答案 1 :(得分:1)
Morteza代码的紧凑版本:
$(document).ready(function () {
var currentBanner = 0;
$("#banner_div img").eq(currentBanner).show("fade");
$("#prev").bind("click", function () {
$("#banner_div img").eq(currentBanner--).hide("fade").prev().show("fade");
});
$("#next").bind("click",function () {
$("#banner_div img").eq(currentBanner++).hide("fade").next().show("fade");
});
});
答案 2 :(得分:0)
使用methode $(selector).show(“fade”)和$(selector).hide(“fade”)
$(document).ready(function () {
var currentBanner = 0;
$("#banner_div img").hide();
$("#banner_div img").eq(currentBanner).show("fade");
$("#prev").bind("click", function () {
$("#banner_div img").eq(currentBanner).hide("fade");
decrease(currentBanner);
$("#banner_div img").eq(currentBanner).show("fade");
});
$("#next").bind("click",function () {
$("#banner_div img").eq(currentBanner).hide("fade");
increase(currentBanner);
$("#banner_div img").eq(currentBanner).show("fade");
});
});
当增加和减少时检查0和横幅数之间的currentBanner。
function increase(n){
n++;
if(n >= $("#banner_div img").length)
n=0;
}
function decrease(n){
n;
if(n < 0 )
n=$("#banner_div img").length -1;
}