MediaTemple上的jQuery幻燈片

Question

我想爲類似http://www.mediatemple.net主頁的產品做一個幻燈片放映，在那裏有右邊那些大點。試圖谷歌，但無法找到一個類似。

Answer 1

他們的代碼是直接在頁面中。在CSS中進行一些調查應該會讓你朝正確的方向發展。

$(document).ready(function() { 

    var nrgtiles = $('div[class^=homesplash]').length; 

/* alert(nrgtiles); */ 

    $('body').append('<div id="nrgrotate">&nbsp;</div>'); 

    var i=1; 

    while (i<=nrgtiles) { 

    $('#nrgrotate').append('<a href="#"><em>&nbsp;</em></a>'); 

    i++; 
    } 

    $('#nrgrotate a:eq(0)').addClass('active'); 

    $('#nrgrotate a:eq(0)').click(function() { 

    homeFadeOut(); 

    return false; 

    }); 

    $('#nrgrotate a:eq(1)').click(function() { 

    homeFadeIn(); 

    return false; 

    }); 

    $('.homesplash2').hide(); 

    timer = setTimeout(homeFadeIn, 10000); 

}); 

function homeFadeIn() { 

    clearTimeout(timer); 

    $('#nrgrotate a:eq(0)').removeClass('active'); 
    $('#nrgrotate a:eq(1)').addClass('active'); 

    $('.homesplash2').fadeIn(1000, function() { 

    timer = setTimeout(homeFadeOut, 10000); 

    }); 

} 

function homeFadeOut() { 

    clearTimeout(timer); 

    $('#nrgrotate a:eq(1)').removeClass('active'); 
    $('#nrgrotate a:eq(0)').addClass('active'); 

    $('.homesplash2').css('margin-top', '-263px').fadeOut(1000, function() { 

    timer = setTimeout(homeFadeIn, 10000); 

    }); 

} 

Answer 2

嘗試了jQuery Cycle插件：http://jquery.malsup.com/cycle/

Answer 3

我建議使用jQuery NIVO滑塊：http://nivo.dev7studios.com/