0

我在使用 Supersized 时遇到问题!插件和替换图像。我遇到的问题是,当我重新加载幻灯片时,从幻灯片到幻灯片的转换速度会呈指数级增长。

要复制问题,请单击项目导航,然后单击子菜单项,然后它会加载下一个幻灯片放映,每次单击一个时,每次转换都会跳过更多幻灯片。

这是网站http://www.liquidvision.co.uk/clients/wattsconstruction/

这是影响的主要代码:

我创建图像数组:

var homeImages = [  
                    {image : 'img/1.jpg', title : '', thumb : 'img/thumbs/1.jpg', url : ''},
                    {image : 'img/2.jpg', title : '', thumb : 'img/thumbs/2.jpg', url : ''},
                    {image : 'img/3.jpg', title : '', thumb : 'img/thumbs/3.jpg', url : ''},
                    ];

var home = $.makeArray(homeImages);

var secondImages = [    
                    {image : 'img/4.jpg', title : '', thumb : 'img/thumbs/4.jpg', url : ''},
                    {image : 'img/5.jpg', title : '', thumb : 'img/thumbs/5.jpg', url : ''},
                    {image : 'img/6.jpg', title : '', thumb : 'img/thumbs/6.jpg', url : ''},
                    ];

var second = $.makeArray(secondImages);

然后设置主页超大幻灯片

$.supersized({

    // Functionality
    slideshow               :   1,          // Slideshow on/off
    autoplay                :   1,          // Slideshow starts playing automatically
    start_slide             :   0,          // Start slide (0 is random)
    stop_loop               :   0,          // Pauses slideshow on last slide
    random                  :   0,          // Randomize slide order (Ignores start slide)
    slide_interval          :   3000,       // Length between transitions
    transition              :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
    transition_speed        :   500,        // Speed of transition
    new_window              :   1,          // Image links open in new window/tab
    pause_hover             :   0,          // Pause slideshow on hover
    keyboard_nav            :   1,          // Keyboard navigation on/off
    performance             :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
    image_protect           :   1,          // Disables image dragging and right click with Javascript

    // Size & Position                         
    min_width               :   0,          // Min width allowed (in pixels)
    min_height              :   0,          // Min height allowed (in pixels)
    vertical_center         :   1,          // Vertically center background
    horizontal_center       :   1,          // Horizontally center background
    fit_always              :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
    fit_portrait            :   0,          // Portrait images will not exceed browser height
    fit_landscape           :   0,          // Landscape images will not exceed browser width

    // Components                           
    slide_links             :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
    thumb_links             :   1,          // Individual thumb links for each slide
    thumbnail_navigation    :   0,          // Thumbnail navigation
    slides                  :   home        // Using the home Image array we created

});

然后创建 restSupersized 函数:

function resetSupersized(arr)
{   

    $("#play-button").empty().remove();
    $("#thumb-list").empty().remove();
    $("#thumb-back").empty().remove();
    $("#thumb-forward").empty().remove();


    $("#supersized").fadeOut('fast', function() 
    {

        $('#supersized-loader').empty().remove();
        $('#supersized').empty().remove();
        $('#hzDownscaled').empty().remove();
        $('body').append('<div id="supersized-loader"></div><ul id="supersized"></ul>');


        // Animation complete.
        $("#tray-button").fadeIn();
        $('#thumb-tray').html('<div id="thumb-back"></div><div id="thumb-forward"></div>');

        $.supersized({
           // Functionality
           slideshow            :   1,          // Slideshow on/off
           autoplay             :   1,          // Slideshow starts playing automatically
           start_slide          :   1,          // Start slide (0 is random)
           stop_loop            :   0,          // Pauses slideshow on last slide
           random               :   0,          // Randomize slide order (Ignores start slide)
           slide_interval       :   3000,       // Length between transitions
           transition           :   1,          // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
           transition_speed     :   500,        // Speed of transition
           new_window           :   1,          // Image links open in new window/tab
           pause_hover          :   0,          // Pause slideshow on hover
           keyboard_nav         :   1,          // Keyboard navigation on/off
           performance          :   1,          // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
           image_protect        :   1,          // Disables image dragging and right click with Javascript

           // Size & Position                          
           min_width            :   0,          // Min width allowed (in pixels)
           min_height           :   0,          // Min height allowed (in pixels)
           vertical_center      :   1,          // Vertically center background
           horizontal_center    :   1,          // Horizontally center background
           fit_always           :   0,          // Image will never exceed browser width or height (Ignores min. dimensions)
           fit_portrait         :   0,          // Portrait images will not exceed browser height
           fit_landscape        :   0,          // Landscape images will not exceed browser width

           // Components                            
            slide_links         :   'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
            thumb_links         :   1,          // Individual thumb links for each slide
            thumbnail_navigation:   0,          // Thumbnail navigation
            slides              :   arr

        });     



    });

}

然后用我要使用的数组调用函数...即 onClick();

resetSupersized(second);

谢谢你的帮助 ;-)

4

1 回答 1

0

不知道这个答案对你是否仍然有效。我一直在寻找这两个的解决方案,如果你在加载画廊之前和之后查看你的 html,它会变得非常简单。

这个画廊所做的是<ul>用你的图像填充一个元素......每次你重新加载你的画廊时,它都会向它添加更多图片而不是删除。

我想你的画廊第一次看起来还不错,当你淡出时,一定要清空你的画廊 div,像这样:

$('#supersized').html('');

于 2013-02-01T10:23:02.897 回答