基于jQuery的仿flash的广告轮播

  整个页面如下:

  

复制代码 代码如下:

  <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head runat="server">

  <title></title>

  <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

  <script src="_Template/js/blockSlide.js" type="text/javascript"></script>

  <style type="text/css">

  div#imgADPlayer

  {

  margin: auto;

  margin-bottom: 4px;

  width: 960px;

  height: 120px;

  background: url(../images/photo_01.jpg) left top no-repeat;

  padding: 0px;

  border: none;

  clear: both;

  position: relative;

  }

  div#imgADPlayer .smask

  {

  position: absolute;

  left: 0px;

  top: 0px;

  }

  </style>

  </head>

  <body>

  <!-- 滚动图片开始 -->

  <div id="imgADPlayer">

  <div id="AdTop">

  <div id="myjQueryContent">

  <div>

  <a href="javascript:void(0)">

  <img src="_Template/images/photo_01.jpg" alt="" /></a></div>

  <div class="smask">

  <a href="javascript:void(0)">

  <img src="_Template/images/photo_02.jpg" alt="" /></a></div>

  <div class="smask">

  <a href="javascript:void(0)">

  <img src="_Template/images/photo_03.jpg" alt="" /></a>

  </div>

  <div class="smask">

  <a href="javascript:void(0)">

  <img src="_Template/images/photo_04.jpg" alt="" /></a></div>

  </div>

  <div id="flow">

  </div>

  </div>

  <script type="text/javascript" language="javascript">

  $(document).ready(function () {

  $("#AdTop").blockSlide({

  speed: "normal",

  num: 4,

  timer: 3000,

  flowSpeed: 300

  });

  });

  </script>

  </div>

  <!--滚动图片结束 -->

  </body>

  </html>

  注释:

  speed:图片轮播速度

  num:图片数量

  timer:自动轮播的时间间隔,定时器;

  flowSpeed:是滑块移动的速速度

  blockSlide插件源码如下:

  

复制代码 代码如下:

  /**

  * @author huajianhuakai */

  (function($)

  {

  $.fn.blockSlide = function(settings)

  {

  settings = jQuery.extend({

  speed: "normal",

  num: 4,

  timer: 1000,

  flowSpeed: 300

  }, settings);

  return this.each(function()

  {

  $.fn.blockSlide.scllor($(this), settings);

  });

  };

  $.fn.blockSlide.scllor = function($this, settings)

  {

  var index = 0;

  var imgScllor = $("div:eq(0)>div", $this);

  var timerID;

  //自动播放

  var MyTime = setInterval(function()

  {

  ShowjQueryFlash(index);

  index++;

  if (index == settings.num)

  index = 0;

  }, settings.timer);

  var ShowjQueryFlash = function(i)

  {

  $(imgScllor).eq(i).animate({ opacity: 1 }, settings.speed).css({ "z-index": "100" }).siblings().animate({ opacity: 0 }, settings.speed).css({ "z-index": "0" });

  }

  }

  })(jQuery);

  希望对和我一样的菜鸟有用