基于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 相关文章推荐
javascript FormatNumber函数实现方法
Dec 30 Javascript
基于jQuery的为attr添加id title等效果的实现代码
Apr 20 Javascript
解决jquery的datepicker的本地化以及Today问题
May 23 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
Feb 19 Javascript
Bootstrap面板学习使用
Feb 09 Javascript
vue.js中Vue-router 2.0基础实践教程
May 08 Javascript
jQuery Form插件使用详解_动力节点Java学院整理
Jul 17 jQuery
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
扩展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
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP实现定时执行任务的方法
2014/10/05 PHP
php递归创建目录的方法
2015/02/02 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
DOM_window对象属性之--clipboardData对象操作代码
2011/02/03 Javascript
用jquery和json从后台获得数据集的代码
2011/11/07 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
jquery等待效果示例
2014/05/01 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
js实现手表表盘时钟与圆周运动
2020/09/18 Javascript
[01:05]DOTA2完美大师赛趣味视频之选手教你打职业
2017/11/23 DOTA
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
英国设计师泳装、沙滩装和比基尼在线精品店:Beach Cafe
2019/08/28 全球购物
财务管理专业应届毕业生求职信
2013/09/22 职场文书
入党申请人的自我鉴定
2013/12/01 职场文书
简单的辞职信范文
2014/01/18 职场文书
捐赠仪式主持词
2014/03/19 职场文书
大学生毕业求职信
2014/06/12 职场文书
2014公安机关纪律作风整顿思想汇报
2014/09/13 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
2015年宣传工作总结
2015/04/08 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
服务行业标语口号
2015/12/26 职场文书
win10键盘驱动怎么修复?Win10键盘驱动修复小技巧
2022/04/06 数码科技
微信小程序调用python模型
2022/04/21 Python