Question

我想为像http://www.mediatemple.net主页这样的产品做幻灯片放映，右边有那些大点。试图谷歌，但找不到一个相似的。

Answer 1

尝试使用jQuery Cycle插件：http://jquery.malsup.com/cycle/

Answer 2

他们的代码直接在页面中。对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 3

我建议使用jQuery Nivo Slider：http://nivo.dev7studios.com/

MediaTemple上的jQuery幻灯片

3 个答案: