<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/index.css" type="text/css">
<script language="javascript" src="scripts/jquery-1.4.2.js"> </script>
<script language="javascript">
$(function(){
var len = $('.num > li').length;
//获取图片个数 alert(len)
var index = 0;
var adTimer;
$('.num li').mouseover(function(){
//主要是获取要显示的图片 index[0,1,2,3,4]
index = $(".num li").index(this);
//alert(index);
showImg(index);
}).eq(0).mouseover();
//添加进入时 自动切换图片效果
$('.ad').hover(
function(){
//方法可取消由 setInterval() 设置的 timeout。
clearInterval(adTimer);
},
function(){
//setInterval() 方法会不停地调用函数
//setInterval(code,millisec[,"lang"]) millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
adTimer = setInterval(
function(){
showImg(index)
index++;
if(index==len){index=0;}
},
3000);
}).trigger("mouseleave");
//在每一个匹配的元素上触发某类事件
//mouseleave 在离开该元素区域时触发。
});
function showImg(index){
//height 取得第一个匹配元素当前计算的高度值
var adHeight = $(".content_right .ad").height();//alert(adHeight);alert(index);
//animate用于创建自定义动画
$(".slider").stop(true,false).animate({top : -(adHeight*index + 16)},1000);
//给数字添加鼠标划过效果 [添加 移除]
$(".num li").removeClass("on").eq(index).addClass("on");
}
</script>
<title>无标题文档</title>
</head>
<body>
<div class="content_right">
<!-- 广告效果 -->
<div class="ad" >
<ul class="slider" >
<li><img src="images/ads/1.gif"/></li>
<li><img src="images/ads/2.gif"/></li>
<li><img src="images/ads/3.gif"/></li>
<li><img src="images/ads/4.gif"/></li>
<li><img src="images/ads/5.gif"/></li>
</ul>
<ul class="num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
<!--add by wangbin,2011-09-28 -->
</body>
</html>
wbandzlhgod
- 粉丝: 77
- 资源: 14
最新资源
- 机械手自动排列控制PLC与触摸屏程序设计
- uDDS源程序publisher
- 中国风格, 节日 主题, PPT模板
- 生菜生长记录数据集.zip
- 微环谐振腔的光学频率梳matlab仿真 微腔光频梳仿真 包括求解LLE方程(Lugiato-Lefever equation)实现微环中的光频梳,同时考虑了色散,克尔非线性,外部泵浦等因素,具有可延展
- 企业宣传PPT模板, 企业宣传PPT模板
- jetbra插件工具,方便开发者快速开发
- agv 1223.fbx
- 全国职业院校技能大赛网络建设与运维规程
- 混合动力汽车动态规划算法理论油耗计算与视频教学,使用matlab编写快速计算程序,整个工程结构模块化,可以快速改为串联,并联,混联等 控制量可以快速扩展为档位,转矩,转速等 状态量一般为SOC,目
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈