技术浅谈
联系我们

基于jQuery的仿flash的广告轮播

发布时间:2018-09-14信息来源:admin

整个页面如下: 复制代码 代码如下: <%@ 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" /></a></div> <div > <a href="javascript:void(0)"> <img src="_Template/images/photo_02.jpg" /></a></div> <div > <a href="javascript:void(0)"> <img src="_Template/images/photo_03.jpg" /></a> </div> <div > <a href="javascript:void(0)"> <img src="_Template/images/photo_04.jpg" /></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); 希望对和我一样的菜鸟有用

本文源自: 凯发k8娱乐官网


上一篇:分享几个超级震憾的图片特效 下一篇:solr SolrIndexSearcher性能问题分析