2012-03-29 108 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