jQuery特色内容滑块，带有每张幻灯片的动画
jQuery特色内容滑块，带有每张幻灯片的动画
提问于 2012-01-25 04:26:25
我正在使用jQuery创建一个功能内容滑块，并且在尝试摆脱最后几个bug时遇到了一些问题。它的灵感来自http://kleientertainment.com/，所以看看它，你就会明白我要做什么了。任何关于实现这种效果的建议，即使使用全新的代码也会很有帮助！
这个想法是一个简单的div交换，但是为加载时触发的每个幻灯片提供自定义动画。它还必须在每个过渡之间淡入淡出为黑色，无论是自动播放还是单击。
让我们来看看代码和bug：
$(document).ready(function () {
//START SLIDES HIDDEN
$('.slide').css({
'position': 'absolute',
'display': 'none'
});
//RUN FIRST SLIDE
runSlideShow(1);
animation1_swap();
//AUTOPLAY FUNCTION
function runSlideShow(slideNumber) {
$('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () {
if (slideNumber == 4) {
animation1_swap();
runSlideShow(1);
}
if (slideNumber == 3) {
animation4_swap();
runSlideShow(4);
}
if (slideNumber == 2) {
animation3_swap();
runSlideShow(3);
}
if (slideNumber == 1) {
animation2_swap();
runSlideShow(2);
}
});
//NAVIGATION BUTTONS
$('#bullet1').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation1_swap();
runSlideShow(1);
});
});
$('#bullet2').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation2_swap();
runSlideShow(2);
});
});
$('#bullet3').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation3_swap();
runSlideShow(3);
});
});
$('#bullet4').click(function () {
$('.slide:visible').stop(true, true).fadeOut(1000, function () {
animation4_swap();
runSlideShow(4);
});
});
}
});CSS info：.slide设置尺寸，#slideX是每个尺寸的单独背景图像。#bulletX是导航按钮。
此外，animationX_swap()是特定于该幻灯片的动画。他们生活在另一个文件中，这会使这篇文章变得太长。
bugs:现在，自动播放功能很棒，你可以看一整天而看不到任何问题。当使用导航按钮时，麻烦就来了，尤其是#bullet1。如果我点击#bullet1，然后转到2，然后回到1，自动播放速度似乎会加快，因为幻灯片在它应该消失之前就消失了。我是一个完全的初学者，但我已经走到这一步了，有没有人能帮我清理一下，重新想象一下http://kleientertainment.com/的滑块？
回答 1
Stack Overflow用户
发布于 2012-01-26 04:51:26
刚从另一篇文章中发现了jQuery周期插件http://malsup.com/jquery/cycle/。
我用它重新制作了我的滑块，它完全按照需要进行预演。好东西！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8993624
复制相关文章
相似问题
腾讯云开发者
