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 Slider：http://nivo.dev7studios.com/