基于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继承 Base类的源码解析
Dec 30 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
非常棒的jQuery图片轮播效果
Apr 17 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
js倒计时显示实例
Dec 11 Javascript
详解js的六大数据类型
Dec 27 Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
Sep 18 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
Feb 01 Javascript
利用vue3+ts实现管理后台(增删改查)
Oct 30 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
合作指挥官:孟斯克
2020/03/16 星际争霸
CI框架源码解读之URI.php中_fetch_uri_string()函数用法分析
2016/05/18 PHP
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
2009/12/04 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
jquery转盘抽奖功能实现
2015/11/13 Javascript
jquery实现右侧栏菜单选择操作
2016/03/04 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JavaScript实现打开链接页面的方式汇总
2016/06/02 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
JavaScript箭头函数_动力节点Java学院整理
2017/06/28 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
信息滚动效果的实例讲解
2017/09/18 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
解决vue-cli单页面手机应用input点击手机端虚拟键盘弹出盖住input问题
2018/08/25 Javascript
Vue实现商品详情页的评价列表功能
2019/09/04 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
vue 获取url里参数的两种方法小结
2020/11/12 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
Python3 适合初学者学习的银行账户登录系统实例
2017/08/08 Python
flask中的wtforms使用方法
2018/07/21 Python
解决Pycharm运行时找不到文件的问题
2018/10/29 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
python实现图片转字符画
2021/02/19 Python
极简的HTML5模版
2015/07/09 HTML / CSS
HTML5 FileReader对象的具体使用方法
2020/05/22 HTML / CSS
全球高级音频和视频专家:HiDef Lifestyle
2019/08/02 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
传播学专业毕业生自荐信
2013/11/04 职场文书
自主实习接收函
2014/01/13 职场文书
离婚财产分隔协议书
2014/10/23 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android