我正在尝试使用新的jQuery运行滑块,因为不赞成使用诸如rotate之类的功能。上载页面时,Slider可以正常工作,并且我正在尝试从右侧的单击选项卡加载图像。当我单击选项卡时,当前图像和当前活动选项卡将被删除,新图像和新活动选项卡将被正确加载,而不是调用startSlider();。再次起作用,但是我失去了i的变量值,所以我的startSlider();运行时不加载图像和活动标签背景。请帮我解决这个问题。这是幻灯片图像:
这是我的jQuery代码:
$(function() {
var count = $(".ui-tabs-nav li").length;
var slideSpeed = 5000;
var fadingSpeed = 300;
var i = 1;
var $slider = $('#featured');
var interval;
function startSlider() {
interval = setInterval(function() {
$("#fragment-"+i).fadeOut(fadingSpeed, function() {
$(this).removeClass("ui-tabs-activated");
$('#nav-fragment-'+i).removeClass("ui-tabs-active");
a = i+1;
if (i == count) {
a = 1;
i = 0;
}
$('#nav-fragment-'+a).addClass("ui-tabs-active");
$("#fragment-"+a).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated");
});
i++;
});
}, slideSpeed); // End setInterval function
}
function stopSlider() {
clearInterval(interval);
}
$('.ui-tabs-nav-item > a').click(function(evt){
evt.preventDefault();
stopSlider();
i = $(this).attr('href'); // href's are values from 1, 2, 3, 4, or 5
var id = $(".ui-tabs-active > a").attr('href');
$(".ui-tabs-nav li").removeClass("ui-tabs-active"); // This remove current tab background
$("#fragment-"+id).remove(); // This remove div with current image
$("#fragment-"+i).fadeIn(fadingSpeed, function() {
$(this).addClass("ui-tabs-activated"); // Load new image
$('#nav-fragment-'+i).addClass("ui-tabs-active"); // Set active background
});
startSlider(); // Start slider again
});
startSlider();
}); // jQuery function
最佳答案
好吧,startslider()使用变量i
淡出并删除活动类,使用变量a
进行淡入并添加活动类。
单击后,将使用变量i
进行淡入并添加活动类。
变量i
是全局变量,因此当您重新启动startslider()时,它将使用该i
淡出。
另外,单击后您要删除元素,但是在代码中您现在的显示中我看不到任何添加新元素或加载图像的东西。