我正在用 jquery 制作 slider 。
var slidePath = '.testSlider > div.slide';
var sliderDuration = 53000;
var rotate = setInterval(slideShow, sliderDuration);
$(slidePath).hide();
slideShowFirst();
$('.slider-block').hover(function() {
clearInterval(rotate);
}, function() {
rotate = setInterval(function() {
slideShow();
}, sliderDuration);
});
$('.control-right').click(slideShow);
$('.control-left').click(function() {
$(slidePath + ':eq(-2)').fadeIn('slow');
$(slidePath + ':last-child').fadeOut('slow').prependTo('.testSlider');
});
function slideShow() {
$(slidePath + ':last-child').fadeOut('slow');
$(slidePath + ':first-child').fadeIn('slow').appendTo('.testSlider');
}
function slideShowFirst() {
$(slidePath + ':first-child').appendTo('.testSlider').show();
}
在我的 slider 中有简单的类似 Ken Burns 的效果。使用 css 动画,当前幻灯片图像正在旋转和放大。
当我转到上一张幻灯片时,当前图像会在一秒钟内返回到原始状态(比例为 100%,无缩放),然后出现上一张幻灯片。看起来很丑。当我转到下一张幻灯片时,我没有这样的问题。
出了什么问题?
我尝试更改它的左控制功能:
$('.control-left').click(function() {
$(slidePath + ':last-child').fadeOut('slow');
$(slidePath + ':eq(-2)').fadeIn('slow');
$(slidePath + ':last-child').prependTo('.reveSlider');
});
但我没有改变..
最佳答案
我猜最后您指的是名为 .control-left
的按钮,试试这个:
$('.control-left').click(function() {
$(slidePath + ':eq(-2)').fadeOut('slow'); // change to .fadeOut()
$(slidePath + ':last-child').fadeIn('slow').prependTo('.testSlider'); // change to fadeIn()
});
如果这不起作用,我不太确定没有你的 HTML,你可以尝试这个
$('.control-left').click(function() {
$(slidePath + ':last-child').fadeOut('slow').prependTo('.testSlider');
$(slidePath + ':eq(-2)').fadeIn('slow');
});
看看它们是如何翻转的?你应该在fadeIn()
fadeOut()
关于Jquery slider 。以前的职位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24222580/