基于jQuery的仿flash的广告轮播代码


Posted in Javascript onNovember 04, 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 相关文章推荐
Prototype1.5 rc2版指南最后一篇之Position
Jan 10 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
Sep 14 Javascript
js滚动条回到顶部的代码
Dec 06 Javascript
jQuery动态添加删除select项(实现代码)
Sep 03 Javascript
window.location 对象所包含的属性
Oct 10 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
Aug 31 Javascript
Angular2入门--架构总览
Mar 29 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
微信小程序实现页面浮动导航
Jan 08 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
Nov 02 #Javascript
关于document.cookie的使用javascript
Oct 29 #Javascript
深入理解JavaScript定时机制
Oct 29 #Javascript
在JS中最常看到切最容易迷惑的语法(转)
Oct 29 #Javascript
ExtJS 入门
Oct 29 #Javascript
js 弹出框 替代浏览器的弹出框
Oct 29 #Javascript
javascript天然的迭代器
Oct 29 #Javascript
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
使用PHP 5.0创建图形的巧妙方法
2010/10/12 PHP
PHP迭代器实现斐波纳契数列的函数
2013/11/12 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
人人网javascript面试题 可以提前实现下
2012/01/05 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
javascript动态创建及删除元素的方法
2014/12/22 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
2015/12/31 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JS实现的几个常用算法
2016/11/12 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JS数组reduce()方法原理及使用技巧解析
2020/07/14 Javascript
javascript实现图片轮换动作方法
2020/08/07 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
Python3爬虫学习入门教程
2018/12/11 Python
Python变量类型知识点总结
2019/02/18 Python
python返回数组的索引实例
2019/11/28 Python
Python三维绘图之Matplotlib库的使用方法
2020/09/20 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
速比涛英国官网:Speedo英国
2019/07/15 全球购物
写好自荐信的技巧
2013/11/08 职场文书
技校毕业生的自我评价
2013/12/27 职场文书
给护士表扬信
2014/01/19 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
高三英语教学反思
2016/03/03 职场文书
公司周年庆寄语
2019/06/21 职场文书