jQuery滑块在加载第一张幻灯片时不显示效果
jQuery slider not displaying effects on first slide load
我是jQuery的新手,我有一个问题,我相信,对你们中的一些人来说,这将是小菜一碟。:)
我创建了一个自定义的图像滑块,除了一件事之外,它几乎可以像我希望的那样工作。只有在通过所有幻灯片后,才会显示每个幻灯片转换上应该出现的效果。在此之前,它们会立即显示出来——一点效果都没有。
这是JSFiddle链接,代码片段如下。
$(document).ready(function () {
var slideHovered = null;
var slideDuration = 7000;
var slideEffectDuration = 2500;
//Initial hiding of inactive slides - is it actually necessary?
$('.slide:not(.active)').each(function () {
$(this).css({
"visibility": "hidden"
});
});
//Check if mouse is hovering over slider
setInterval(function () {
slideHovered = $('.leftContentWrapper').is(":hover");
}, 500);
//Function to start slideshow
function startSlides(slideDirection) {
var slideNumber = $('.slide.active').data('slide');
var highestSlideNumber = null;
//Function to find highest slide number
$('.slide').each(function () {
var value = parseFloat($(this).attr('data-slide'));
highestSlideNumber = (value > highestSlideNumber) ? value : highestSlideNumber;
});
slideNumber = slideDirection == 'next' ? slideNumber = slideNumber + 1 : slideNumber = slideNumber - 1;
slideNumber = slideNumber <= 0 ? slideNumber = highestSlideNumber : slideNumber = slideNumber;
slideNumber = slideNumber > highestSlideNumber ? slideNumber = 1 : slideNumber = slideNumber;
$('.slide.active').removeClass('active').hide();
$('[data-slide="' + slideNumber + '"]').addClass('active').fadeIn(slideEffectDuration, function () {});
$('.slide.active').css({
'visibility': 'visible'
});
}
//Function to change slide every x seconds if there is no hovering over
setInterval(function () {
if (slideHovered === false) {
startSlides('next');
} else {
return false;
}
}, slideDuration);
$('.control').click(function () {
var slideDirection = $(this).attr('id');
startSlides(slideDirection);
});
});
附言:如有任何额外的代码建议或建议,我们将不胜感激。
您的初始隐藏是个问题,请将其更改为:
$(this).css({
"display": "none"
});
相关文章:
- jm按下停止步骤进入滚动的下一张幻灯片
- 当 Flickity 到达下一张或上一张幻灯片时的事件
- 为什么bxSlider会打断我在最后一张幻灯片和第一张幻灯片之间的转换
- 引导程序3转盘-随机选择下一张幻灯片
- 如何在最后一张幻灯片上停止动画
- 完整的背景图片幻灯片jquery,想让幻灯片的最后一张图片可以点击
- Basic jQuery Slider中上一张/下一张幻灯片的自定义链接触发器
- 指向html5库最后一张幻灯片后的html页面
- jQuery 循环 如果只有一张幻灯片,则隐藏上一个/下一个导航
- 如何停止幻灯片放映隐藏文本和图像跳到顶部,而下一张幻灯片进来
- jQuery幻灯片,转到上一张图片
- iOS 滑块默认为最后一张幻灯片
- 光滑的滑块删除最后一张幻灯片,如果 winWidth < 500
- Javascript幻灯片在节目开始时快速出现最后一张图像
- BX滑块滑块滑块最后一张幻灯片总是隐藏某些部分
- 滑入下一张柔性滑块幻灯片后,css 动画不起作用
- 如何在显示前在幻灯片放映中预加载下一张幻灯片
- 滑块中显示下一张幻灯片的链接.为什么
- 如何获取最后一张和第一张幻灯片以相应地激活或禁用下一个和上一个按钮
- 幻灯片放映-将幻灯片链接到URL,仅适用于最后一张幻灯片