基于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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
用正则表达式 动态创建/增加css style script 兼容IE firefox
Mar 10 Javascript
基于JQuery的抓取博客园首页RSS的代码
Dec 01 Javascript
jQuery简单实现隐藏以及显示特效
Feb 26 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
正则 js分转元带千分符号详解
Mar 08 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
May 11 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信小程序人脸识别功能代码实例
May 07 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
Dec 25 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
phplot生成图片类用法详解
2015/01/06 PHP
yii2带搜索功能的下拉框实例详解
2016/05/12 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
PHP7 新增功能
2021/03/09 PHP
用JS提交参数创建form表单在FireFox中遇到的问题
2013/01/16 Javascript
用客户端js实现带省略号的分页
2013/04/27 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
JS实现兼容性较好的随屏滚动效果
2015/11/09 Javascript
JavaScript判断DIV内容是否为空的方法
2016/01/29 Javascript
JS实现的在线调色板实例(附demo源码下载)
2016/03/01 Javascript
node.js实现端口转发
2016/04/14 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
jQuery的中 is(':visible') 解析及用法(必看)
2017/02/12 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
element-ui多文件上传的实现示例
2019/04/10 Javascript
Vue实现图片与文字混输效果
2019/12/04 Javascript
微信小程序实现购物车功能
2020/11/18 Javascript
ES5和ES6中类的区别总结
2020/12/21 Javascript
使用Python来开发微信功能
2018/06/13 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python API len函数操作过程解析
2020/03/05 Python
django中cookiecutter的使用教程
2020/12/03 Python
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
皇家阿尔伯特英国官方商店:Royal Albert骨瓷
2019/03/25 全球购物
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
法律专业个人实习自我鉴定
2013/09/23 职场文书
市政施工员自我鉴定
2014/01/15 职场文书
优秀医生事迹材料
2014/02/12 职场文书
学习党的群众路线剖析材料
2014/10/09 职场文书
第二批党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
论语读书笔记
2015/06/26 职场文书
校运会班级霸气口号
2015/12/24 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python
Pygame Time时间控制的具体使用详解
2021/11/17 Python