基于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 相关文章推荐
学习jquery必备 api中英文对照的chm手册 下载
May 03 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
Nov 17 Javascript
javascript控制台详解
Jun 25 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
Jul 21 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
Aug 25 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
Layui实现带查询条件的分页
Jul 27 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
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
Discuz!下Memcache缓存实现方法
2010/05/28 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
JavaScript中的History历史对象
2008/01/16 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
jQuery+PHP星级评分实现方法
2015/10/02 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
详细谈谈AngularJS的子级作用域问题
2016/09/05 Javascript
JavaScript 总结几个提高性能知识点(推荐)
2017/02/20 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
JS实现鼠标移动拖尾
2020/12/27 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
AI人工智能 Python实现人机对话
2017/11/13 Python
Python中装饰器高级用法详解
2017/12/25 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
python自动发送邮件脚本
2018/06/20 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
matplotlib源码解析标题实现(窗口标题,标题,子图标题不同之间的差异)
2021/02/22 Python
奥巴马演讲稿
2014/01/08 职场文书
幼儿园教师教育感言
2014/02/28 职场文书
聚美优品的广告词
2014/03/14 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
导游个人求职信
2014/04/25 职场文书
集中整治工作方案
2014/05/01 职场文书
119消防日活动总结
2014/08/29 职场文书
异地年检委托书范本
2014/09/24 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
MySQL快速插入一亿测试数据
2021/06/23 MySQL
MySQL创建管理LIST分区
2022/04/13 MySQL