基于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 相关文章推荐
用js查找法实现当前栏目的高亮显示的代码
Nov 24 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
Aug 06 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
javascript中setTimeout使用指南
Jul 26 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
Jan 06 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
js仿京东轮播效果 选项卡套选项卡使用
Jan 12 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
浅谈webpack+react多页面开发终极架构
Nov 11 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
微信小程序自定义弹出层效果
May 26 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
ThinkPHP中的系统常量和预定义常量集合
2014/07/01 PHP
CodeIgniter中实现泛域名解析
2014/07/19 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
js比较日期大小的方法
2015/05/12 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
2015/12/09 Javascript
jQuery模拟select实现下拉菜单功能
2016/06/20 Javascript
javascript 数组的正态分布排序的问题
2016/07/31 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
python中wx将图标显示在右下角的脚本代码
2013/03/08 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
详解python环境安装selenium和手动下载安装selenium的方法
2020/03/17 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
巴西购物网站:Onofre Agora
2020/06/08 全球购物
岗位聘任书范文
2014/03/29 职场文书
教师教学评估方案
2014/05/09 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
优秀团员事迹材料
2014/12/25 职场文书
教学督导岗位职责
2015/04/10 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Python离线安装openpyxl模块的步骤
2021/03/30 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
MyBatis-Plus 批量插入数据的操作方法
2021/09/25 Java/Android