基于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); 希望对和我一样的菜鸟有用

　　推荐阅读

　　javascript开发中因空格引发的错误

废话不多说，先上代码给大家看看复制代码代码如下: <!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>>>详细阅读

本文标题：基于jQuery的仿flash的广告轮播

地址：http://www.17bianji.com/kaifa2/JS/25477.html

1/2 1