第一个实例很好用，但是第二个不会隐藏以前的图像。还有什么可以改善性能的地方吗？
$(function() {
$('.fader img:not(:first)').hide();
$('.fader img').css('position', 'absolute');
$('.fader img').css('top', '0px');
$('.fader img').css('left', '50%');
$('.fader img').each(function() {
var img = $(this);
$('').attr('src', $(this).attr('src')).load(function() {
img.css('margin-left', -this.width / 2 + 'px');
});
});
var pause = false;
function fadeNext() {
$('.fader img').first().fadeOut().appendTo($('.fader'));
$('.fader img').first().fadeIn();
}
function fadePrev() {
$('.fader img').first().fadeOut();
$('.fader img').last().prependTo($('.fader')).fadeIn();
}
function doRotate() {
if(!pause) {
fadeNext();
}
}
var rotate = setInterval(doRotate, 2000);
});
您实际上可以用更少的代码来完成此操作，还建议您使用CSS过渡来利用硬件加速，而不是过多地依赖jQuery函数。
看一下我的例子：http : //jsfiddle.net/CUJAZ/
(function() {
'use strict';
var currentSlide = 0;
var $slides = jQuery('.slideshow img');
var slideTo = function ( targetIndex ) {
$slides.removeClass('show');
$slides.eq(targetIndex).addClass('show');
currentSlide = targetIndex;
};
var prevSlide = function () {
if( currentSlide === 0 ) {
return;
}
slideTo(currentSlide - 1);
};
var nextSlide = function () {
if( currentSlide >= $slides.length - 1 ) {
return;
}
slideTo(currentSlide + 1);
};
slideTo(0);
var timer = window.setInterval(nextSlide, 2000);
})();
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句