JQuery平滑滑動圖庫

Question

JQuery UI滑動屬性存在問題。這將產生一個溫和滑出當前圖像的同時，下一個圖像輕輕滑入。

$(document).ready(function(){ 
    $('.gallery img').hide(); $('.gallery img:first').show().addClass('galo'); 


    $('.galarr.r).click(function(){ 
     var next = $('.galo').next(); 
     $('.galo').hide('slide', {direction:'left'}, {duration:800, queue:false}).removeClass('galo'); $(next).show('slide', {direction:'right'}, {duration:800, queue:false}).addClass('galo'); 
}); 

}); 

我們的網站上它，而不是滑動舊的，留下的空白區域，然後下一個圖像突然出現。

我已經設置了一個簡單的小提琴，儘管有相同的代碼，根本不起作用。問題是什麼。

http://jsfiddle.net/W27YK/7/

Firebug的報道，nextslide（）是不是當它很清楚的是小提琴的功能。

Answer 1

這是我認爲你正在努力完成的工作jsFiddle。

有幾件事要記住。

• 如果元素絕對定位，幻燈片效果往往效果更好。我將其添加到.gallery img的樣式中。
• 當放置在相對位置的父框中時，絕對定位的項目效果最好，否則它們對於頁面是絕對的，而不是相對於父項的絕對定位（這是預期的功能）
• 您會注意到這也固定了右鍵/ img的位置，因爲它位於文檔正文右側15像素處，而不是右側邊緣15像素處。
• 我注意到你的按鈕是錯誤的高度，並將其更新爲精靈圖像的高度。出於某種原因，它正在擾亂我;）。

，將該代碼......你修改後的CSS：

.gallery { position: relative; width:700px; height:370px; border-bottom:1px solid #DDD; overflow:hidden; } 
.gallery img { width:700px; height:370px; border:0px; position: absolute;} 

.gallery a.galarr.l { position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) left top no-repeat; position:absolute; top:160px; left:15px; display:block;} 
.gallery a.galarr.r{ position:absolute; width:28px; height:50px; background:url(http://www.golfbrowser.com/wp-content/themes/RIK/images/core/galarr.png) right top no-repeat; position:absolute; top:160px; right:15px; display:block;} 

而且修改後的javascript：

$(document).ready(function() { 
    $('.gallery img').hide(); 
    $('.gallery img:first').show().addClass('galo'); 

    $('.galarr').click(function() { 
     // one event handler to rule them all, both left and right! 
     var $next, slideOutDir = ''; 

     // figure out what direction the images are sliding, and act accordingly. 
     if ($(this).hasClass('l')) { 
      slideOutDir = "right"; 
      // figure out rather the next slide is there, or we need to wrap to the end 
      $next = $('img.galo').prev('img').length ? $('img.galo').prev('img') : $("img:last"); 
     } 
     else { 
      slideOutDir = "left"; 
      // figure out rather the next slide is there, or we need to wrap to the beginning 
      $next = $('img.galo').next('img').length ? $('img.galo').next('img') : $(".gallery img:first"); 
     } 

     if (!$next.length) { 
      $next = $(".gallery img:first"); 
     } 
     //$next.css('z-index', 5); 
     //$('img.galo').css('z-index', 1); 
     $('img.galo').hide('slide', { 
      direction: slideOutDir 
     }).removeClass('galo'); 
     $next.show('slide', { 
      direction: (slideOutDir === "left" ? 'right' : 'left') 
     }).addClass('galo'); 
    }); 

});