基于jQuery的仿flash的广告轮播


Posted in Javascript onNovember 05, 2010

整个页面如下:

<%@ 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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
javascript 运算数的求值顺序
Aug 23 Javascript
Html5的placeholder属性(IE兼容)实现代码
Aug 30 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
Mar 04 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
javaScript语法总结
Nov 25 Javascript
JavaScript获取短信验证码(周期性)
Dec 29 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
jQuery实现飞机大战小游戏
Jul 05 jQuery
Vue实现图书管理小案例
Dec 03 Vue.js
jquery实现文本框鼠标右击无效以及不能输入的代码
Nov 05 #Javascript
基于jquery的loading效果实现代码
Nov 05 #Javascript
解决jQuery插件tipswindown与hintbox冲突
Nov 05 #Javascript
Jquery数独游戏解析(一)-页面布局
Nov 05 #Javascript
TinyMCE 新增本地图片上传功能
Nov 05 #Javascript
jQuery示例收集
Nov 05 #Javascript
jquery 全局AJAX事件使用代码
Nov 05 #Javascript
You might like
PHP 命令行参数详解及应用
2011/05/18 PHP
PHP设计模式 注册表模式(多个类的注册)
2012/02/05 PHP
怎样搭建PHP开发环境
2015/07/28 PHP
PHP 微信扫码支付源代码(推荐)
2016/11/03 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
JavaScript中的数组操作介绍
2014/12/30 Javascript
jquery实现拖拽调整Div大小
2015/01/30 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
vue debug 二种方法
2018/09/16 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
Vue3不支持Filters过滤器的问题
2020/09/24 Javascript
在Python的Django框架中包装视图函数
2015/07/20 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
Django实现学员管理系统
2019/02/26 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
python实现飞机大战项目
2020/03/11 Python
卡西欧B级产品官方网站:Casio Outlet
2018/05/22 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
学历公证书范本
2014/04/09 职场文书
爱心捐款倡议书
2014/04/14 职场文书
售后服务承诺书模板
2014/05/21 职场文书
家长会标语
2014/06/24 职场文书
2015年城管个人工作总结范文
2015/04/20 职场文书
心灵捕手观后感
2015/06/02 职场文书
mysql数据库入门第一步之创建表
2021/05/14 MySQL
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
MySQL悲观锁与乐观锁的实现方案
2021/11/02 MySQL