2012-04-18 65 views
0

嗨我工作與JQuery幻燈片。我的所有圖片都是在我的html上,我試着讓我的代碼從最後一張圖片開始。但它不會工作,有什麼想法?反向JQuery幻燈片

原來的代碼如下所示:

$(document).ready(function() { 
    var current = $('#gallery img:first'); 
    //Set the fade in effect for the next image, show class has higher z-index 
    current.addClass('show').css({ 
     opacity: 0.0 
    }).animate({ 
     opacity: 1.0 
    }, 1000); 

    setInterval('gallery()', 3000); 
}); 

function gallery() { 
    //if no IMGs have the show class, grab the first image 
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img:first')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var next = ((current.next().length) ? current.next() : $('#gallery img:first')); 

    //Set the fade in effect for the next image, show class has higher z-index 
    next.css({ 
     opacity: 0.0 
    }).addClass('show').animate({ 
     opacity: 1.0 
    }, 1000); 

    //Hide the current image 
    current.animate({ 
     opacity: 0.0 
    }, 1000).removeClass('show'); 
}​ 

我的反向代碼如下所示:

$(document).ready(function() { 
    var current = $('#gallery img:last'); 
    //Set the fade in effect for the next image, show class has higher z-index 
    current.addClass('show').css({ 
     opacity: 0.0 
    }).animate({ 
     opacity: 1.0 
    }, 1000); 

    setInterval('gallery()', 3000); 
}); 

function gallery() { 
    //if no IMGs have the show class, grab the first image 
    var current = ($('#gallery img.show') ? $('#gallery img.show') : $('#gallery img:last')); 

    //Get next image, if it reached the end of the slideshow, rotate it back to the first image 
    var before = ((current.before().length) ? current.before() : $('#gallery img:last')); 

    //Set the fade in effect for the next image, show class has higher z-index 
    before.css({ 
     opacity: 0.0 
    }).addClass('show').animate({ 
     opacity: 1.0 
    }, 1000); 

    //Hide the current image 
    current.animate({ 
     opacity: 0.0 
    }, 1000).removeClass('show'); 
}​ 
+0

任何測試頁面看? – mprabhat 2012-04-18 17:43:38

+0

@mprabhat在線測試頁面,對不起 – 2012-04-18 17:48:54

+0

是否只有最後一個項目才顯示,隱藏?是你的問題? – mprabhat 2012-04-18 17:55:25

回答

1

在沒有測試頁,我加入UL圖片做:

var before = ((current.prev().length) ? current.prev() : $('#gallery img:last')); 

這將選擇要顯示的prev圖像,如果沒有,則再次選擇最後的圖像。

你可以試試,如果這對你有用嗎?

+0

沒有把圖像在ul中,但添加了prev和它的工作^^ – 2012-04-18 18:21:08

+1

啊沒關係,因爲這是我的網頁想成爲明確的,反正很高興它幫助你:) – mprabhat 2012-04-18 18:22:06