我已经使用 CSS 过渡编写了一个图片库。如果 CSS 过渡不能被 modernizr 插件用作 picekd,它默认为淡入淡出效果。这种效果根本不起作用。任何人都可以看到代码的问题。CSS3 版本功能齐全。
编辑
我已将其重新制作为 addClass 和 removeClass,类似于 web-kit 的工作方式。JQuery 函数现在可以正常工作,没有控制台错误。虽然它不是特别流畅。使用 CSS-3 过渡,如果用户单击多个缩略图,即使效果进行到一半,图像也会轻轻过渡。JQuery 接缝堵塞然后开始跳来跳去。
对此有任何想法。
var timerp = null;
var nextslide;
if(!Modernizr.csstransitions) {
$('.thumbs').click(function() {
if (timerp) {
window.clearInterval(timerp);
}
$('.cornerimgfocus').removeClass('cornerimgfocus',{queue:true,duration:2000});
$('#P' + $(this).attr('id')).addClass('cornerimgfocus',{queue:true,duration:2000});
gallery();
});
function gallery() {
timerp = window.setInterval(function() {
var islide = $('.cornerimgfocus');
islide.removeClass('cornerimgfocus',{queue:true,duration:2000});
if (islide[0] == $('.cornerimg:last')[0]) {
nextslide = $('.cornerimg').first();
} else {
nextslide = islide.next();
};
nextslide.addClass('cornerimgfocus',{queue:true,duration:2000});
}, 6000);
}
}
else {
$('.thumbs').click(function() {
if (timerp) {
window.clearInterval(timerp);
}
$('.cornerimgfocus').removeClass('cornerimgfocus');
$('#P' + $(this).attr('id')).addClass('cornerimgfocus');
gallery();
});
function gallery() {
timerp = window.setInterval(function() {
var islide = $('.cornerimgfocus');
islide.removeClass('cornerimgfocus');
if (islide[0] == $('.cornerimg:last')[0]) {
nextslide = $('.cornerimg').first();
} else {
nextslide = islide.next();
};
nextslide.addClass('cornerimgfocus');
}, 6000);
}
}