我在制作一个非常简单的jQuery幻灯片。
如果我有超过2个LI元素,幻灯片效果可以平稳地运行。但是对于2个LI元素(当前代码),点击“下一个”会出现抖动效果,然而点击“上一个”链接后幻灯片效果可以完美运行。任何线索或解决方案都将不胜感激。 提前致谢。
我在制作一个非常简单的jQuery幻灯片。
如果我有超过2个LI元素,幻灯片效果可以平稳地运行。但是对于2个LI元素(当前代码),点击“下一个”会出现抖动效果,然而点击“上一个”链接后幻灯片效果可以完美运行。任何线索或解决方案都将不胜感激。 提前致谢。
好的,已经编辑过了。
正如我在评论中指出的那样,问题在于当你点击“下一页”时,没有第一个元素可以切换到,所以它会切换到一个空白元素,然后附加第一个元素。
详细解释:
实际上非常简单。你的脚本有三个“活动”幻灯片:当前、下一个和前一个。
如果你只有两个幻灯片,那么你就没有下一个幻灯片(根据你使用的排序方法),所以你不是切换到下一张幻灯片,而是切换到一个空白空间,然后将第二张幻灯片放置在它的位置上(第二张幻灯片在动画结束后出现,因此会“闪烁”)。
现在,“补丁”的作用是什么。基本上,你可以尝试在没有补丁的情况下运行代码,并从滑块包装中删除“margin-left: -500px”,然后你就会明白它的作用,但无论如何,我都会解释一下。
假设您有一个仅包含2个值的基本数组,而非列表。您有两个选项:下一页(Next),它将索引增加1,和上一页(Previous),它将索引减少1。您的初始幻灯片具有索引0,因此如果您增加索引,就会到达索引1;如果您减少索引,就会得到索引-1,这将导致空白幻灯片,从而导致闪烁,这是如果您从<ul>
元素中删除'margin-left'时脚本的工作方式。这个补丁的作用是检测异常是否有效,并开关margin-left
值。
不幸的是,当你这样做时,幻灯片的顺序也会改变,所以需要额外添加一个附加项来排序。如果你在IF语句中删除了额外的附加项,你会注意到这个事件。
这个补丁的值有以下含义:
0 - 不需要修补。
1 - 下一个函数在下一次使用前需要修复。
2 - 上一个函数在下一次使用前需要修复。
而IF语句则进行修补。
可以通过添加一个虚拟元素在开头来修复它,代码如下:
if($('.slider ul').length<3){
$('.slider ul li:first-child').clone().appendTo('.slider ul');
}
当您单击“下一个”或“上一个”时,结束并擦除它。
编辑2:更加优雅和完整的解决方案!版本2.0
编辑下一个和上一个函数:
var patched = 0;
if($('.slider ul li').length==2){
patched = 1;
}
var sliderWrap = $('.slider ul'),
slideElem = $('.slider ul li'),
slideCount = slideElem.length,
slideWidth = $('.slider ul li').width(),
slideHeight = $('.slider ul li').height(),
sliderUlWidth = slideCount * slideWidth;
$('.slider').css({ width: slideWidth, height: slideHeight });
$('.slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('.slider ul li:last-child').prependTo('.slider ul');
var previous = function() {
if(patched==2){
sliderWrap.css('margin-left','-500px');
$('.slider ul li:last-child').prependTo('.slider ul');
patched=1;
}
sliderWrap.animate({
left: + slideWidth
}, 200, function () {
$('.slider ul li:last-child').prependTo('.slider ul');
sliderWrap.css('left', '');
});
};
var next = function() {
if(patched==1){
sliderWrap.css('margin-left','0px');
$('.slider ul li:first-child').appendTo('.slider ul');
patched=2;
}
sliderWrap.animate({
left: - slideWidth
}, 200, function () {
$('.slider ul li:first-child').appendTo('.slider ul');
sliderWrap.css('left', '');
});
};
请尝试新的链接:http://jsbin.com/pexigesu/32/edit
编辑:如果只有一个滑块,请将开头更改为:
if($('.slider ul li').length==2){
patched = 1;
}else if($('.slider ul li').length==1){
$('.slider ul li:last-child').clone().prependTo('.slider ul');
$('.slider ul li:last-child').clone().prependTo('.slider ul');
}