2012-03-29 125 views
0
var currentImage; 
var currentIndex = 0; 
function showImage(index){ 
    if(index < $('#backimg img').length){ 
     var indexImage = $('#backimg img')[index] 
     if(currentImage){ 
      if(currentImage != indexImage){ 
       $(currentImage).css('z-index',2); 
       $(currentImage).fadeOut(250, function() { 
        $(this).css({'display':'none','z-index':1}) 
       }); 
      } 
     } 
     $(indexImage).css({'display':'block', 'opacity':1}); 
     currentImage = indexImage; 
     currentIndex = index; 
     $('#thumbs li').removeClass('active'); 
     $($('#thumbs li')[index]).addClass('active'); 
    } 
} 
function showNext(){ 
    var len = $('#backimg img').length; 
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0; 
    showImage(next); 
} 
function showPrev(){ 
    var len = $('#backimg img').length; 
    var next = currentIndex > 0 ? currentIndex - 1 : 0; 
    showImage(next); 
} 
$(document).ready(function() { 
    showNext(); 
    showPrev(); 
    $('#thumbs li').bind('click',function(e){ 
     var count = $(this).attr('rel'); 
     showImage(parseInt(count)-1); 
    }); 
    $('#prev a').click(function() { 
     showPrev(); 
    }); 
    $('#next a').click(function() { 
     showNext(); 
    }); 
}); 

我對「上一個」按鈕有問題。在到達第一張圖像後,它停止工作,我的意思是他沒有滑到最後一張。我真的不知道問題是什麼,請幫忙。 (下一步按鈕工作完美)上一個不能正常工作

+0

也張貼你的html – DG3 2012-03-29 18:49:12

+0

你能發表html嗎?我認爲你的方法可能會複雜,也許不必要... – elclanrs 2012-03-29 18:51:11

回答

0

你有沒有設定新的索引到最後一個圖像到第一,如果你回去從第一圖像一個科技諮詢,在您的函數u始終將圖像設置爲0

function showPrev(){ 
    var len = $('#backimg img').length; 
    var next = currentIndex > 0 ? currentIndex - 1 : len-1 ; 
    showImage(next); 
} 
+0

它的工作!但是可以爲圖像插入預加載器嗎? – Schito 2012-03-29 18:56:42

+0

當然,但這是一個不同的話題,有很多可能的預加載實現 - 請參閱:http://stackoverflow.com/questions/476679/preloading-images-with-jquery – 2012-03-29 19:00:28