Question

此函数使用JQuery和UI在图库中相互淡化图像。我的结果非常奇怪。

开头有第一张图片的双重闪光
最后一张图片没有正确淡入第一张图片
缩略图（.thumbs）需要从当前动画的位置设置动画并重置计时器
在IE 8（可能是其他人）中无法正常运行

我已经设置了一个小提琴。

代码必须使用add和remove类函数，因为它将由移动设备上的CSS3过渡控制。

$(document).ready(function(){
    var slideShow;
    var slidefirst = $('.thumbs:first');
    console.log(slidefirst);

    $('.thumbs').click(function() {
        var final = $('.cornerimg').last().attr('id').replace('t','');
        var slide = $(this).attr('id').replace('t','');
        $('.cornerimg').removeClass('cornerimgfocus',2000);
        $('#P' + slide).addClass('cornerimgfocus',2000);
        clearTimeout(slideShow);
        slideShow = setTimeout(function() {
            if ($('#P' + slide) == final) {
                $(slidefirst).click();
            }
            else {
                $('.thumbs').click();
            }

        }, 5000);

    });
    $('.thumbs:first').click();
});

有什么想法吗？

非凡

Answer 1

简单解决方案

如果其他任何人需要一个JQuery图库，默认为支持这些出色新功能的任何设备的CSS3过渡。您需要使用modernizr插件并将转换代码保留在普通CSS之外。然后，只有在modernizr检测到CSS3时，才能将另一个CSS类添加到幻灯片中的所有图像中。该类将包含CSS3转换信息，现在只添加不会使非CSS3设备陷入困境。然后有第三个CSS课程，你想要转换到哪里并使用相同的登录（在这种情况下是JQuery addClass / removeClass。

$(document).ready(function(){
    // Standard JQuery Slideshow
    if(!Modernizr.csstransitions) {
    $('.cornerimg').hide(); // Hide all images
    var slideShowTO, slide; // Global vars

    $('.thumbs').click(function() {
    if (slide) $('#P' + slide).fadeOut(2000);
    slide = $(this).attr('id');
    $('#P' + slide).fadeIn(2000);
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

    });
    }
    // CSS Transitions Slideshow
    else if(Modernizr.csstransitions) {
    $('.cornerimg').addClass('cornerimgcss'); 
    var slideShowTO, slide; // Global vars

    $('.thumbs').click(function() {
    if (slide) $('#P' + slide).removeClass('cornerimgfocus');
    slide = $(this).attr('id');
    $('#P' + slide).addClass('cornerimgfocus');
    clearTimeout(slideShowTO);
    slideShowTO = setTimeout(function() {
        var next = $('#' + slide).next();
        if (next.hasClass('thumbs'))
            next.click();
        else
            $('.thumbs:first').click();

    }, 4000);

    });
    }
$('.thumbs:first').click();
});

非凡

JQuery Image Gallery褪色并不总是在工作和IE悲剧 - 解决一个小提琴

1 个答案: