我认为开发以自动间隔从一个div渐变到下一个div的滑块功能会是一个有趣的项目。它有效!但由于某种原因,当它返回到第一张幻灯片时,淡入淡出的动画会停止工作,但当它前进到下一张幻灯片及以后时会恢复工作。只有在从最后一张幻灯片切换到第一张幻灯片时,动画才会失败。这对我来说没有意义,因为除了索引之外,前进和重新启动的代码基本上都是相同的。
我尝试过z索引,我尝试过将隐藏/显示与FadeTo结合使用,我尝试了这三种方法的组合。似乎无法解决问题。
我将代码添加到控制台的输出中,以查看出了什么问题,但我没有发现任何问题。我相信这是一件微妙但关键的事情,但它一直在困扰着我。所以任何见解都是值得赞赏的!
代码和工作示例如下所示:http://jsfiddle.net/cawwM/
这是进行幻灯片切换的功能:
function toggleSlides(slideArray) {
var currentSlideIndex = 0;
var slideLength = slideArray.length;
window.console&&console.log('Slide Toggle interval fired. n');
window.console&&console.log('Searching for current slide... n');
$.each(slideArray,function(index, value){
if($('#'+value).hasClass('currentSlide') === true) {
currentSlideIndex = index;
window.console&&console.log('Current slide identified. n');
return (false); // break loop, we have index.
}
});
if(currentSlideIndex < slideLength - 1) {
// Advance to next slide
window.console&&console.log('Still more slides ('+currentSlideIndex+' < '+(slideLength - 1)+'). Advancing to next slide now. n');
$('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
$('#'+slideArray[currentSlideIndex+1]).addClass('currentSlide');
$('element').css('z-index', 9999);
$('#'+slideArray[currentSlideIndex+1]).show().fadeTo('slow', 1, function() {
$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
}).css('z-index', 5);
} else {
// Go back to the first slide
window.console&&console.log('No further slides, going back to first slide now. n');
$('#'+slideArray[currentSlideIndex]).removeClass('currentSlide');
$('#'+slideArray[0]).addClass('currentSlide');
$('#'+slideArray[0]).show().fadeTo('slow', 1, function() {
$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
}).css('z-index', 5);
}
window.console&&console.log('Done with slide toggling. n');
}
再次感谢您的反馈!如果你看到我可以改进代码的方法,我也会很感激的——我总是热衷于通过学习更好的方法来提高我的技能。
问题出在这一行,Done with slide toggling
之前的行
$('#'+slideArray[currentSlideIndex]).fadeTo(0, 0).hide().css('z-index', 1);
删除hide()
方法并应用slow
效果。
$('#'+slideArray[currentSlideIndex]).fadeTo('slow', 0).css('z-index', 1);
通过移除hide()
,它不会立即隐藏最后一张幻灯片
FIDDLE