图片切换展示效果
来源:互联网 发布:无线键鼠 游戏 知乎 编辑:程序博客网 时间:2024/04/28 10:35
<!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=gb2312" />
<title>图片切换展示效果</title>
<script type="text/javascript" src="common/jquery-1.2.6.min.js"></script>
<link type="text/css" rel="stylesheet" href="common/common.css" />
<style type="text/css">
.scroll{width:408px;height:168px;overflow:hidden;position:relative;border:#ccc 1px solid;}
.slider{position:absolute;}
.slider img{width:408px;height:168px;display:block;}
.num{position:absolute;right:5px;bottom:5px;}
.num li{float:left;color:#FF7300;text-align:center;line-height:16px;width:16px;height:16px;font-family:Arial;font-size:12px;cursor:pointer;overflow:hidden;margin:3px 1px;border:1px solid #FF7300;background-color:#fff;}
.num li.on{color:#fff;line-height:21px;width:21px;height:21px;font-size:16px;margin:0 1px;border:0;background-color:#FF7300;font-weight:bold;}
</style>
</head>
<body>
<script language="javascript" >
$(function(){
var len = $("#idNum > li").length;
var index = 0;
$("#idNum li").mouseover(function(){
index = $("#idNum li").index(this);
showImg(index);
});
$('#idTransformView').hover(function(){
if(MyTime){
clearInterval(MyTime);
}
},function(){
MyTime = setInterval(function(){
showImg(index)
index++;
if(index==len){index=0;}
} , 4000);
});
var MyTime = setInterval(function(){
showImg(index)
index++;
if(index==len){index=0;}
} , 4000);
})
function showImg(i){
$("#idSlider").stop(true,false).animate({top : -168*i},800);
$("#idNum li")
.eq(i).addClass("on")
.siblings().removeClass("on");
}
</script>
<div class="scroll" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="http://www.ouyea.com/Template/default/Images/ad/index0908_ad_top03.jpg"/></li>
<li><img src="http://www.ouyea.com/Template/default/Images/activity/ad1.jpg"/></li>
<li><img src="http://www.ouyea.com/UploadFile/Picture/2009-9-21/2009921170353571.jpg"/></li>
<li><img src="http://www.ouyea.com/Template/default/Images/ad/index0908_ad_top03.jpg"/></li>
<li><img src="http://www.ouyea.com/Template/default/Images/activity/ad1.jpg"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
- 图片切换展示效果
- JavaScript 图片切换展示效果
- 实现图片滑动切换展示效果
- 图片展示Cool效果
- jQuery:图片展示效果
- [CSS]图片展示效果
- flex 图片展示效果
- javascript图片展示效果
- 图片滑动展示效果
- 综合图片展示效果
- JavaScript html js图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
- JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻
- 图片展示(手动左右切换)
- jQuery实例:图片展示效果
- FLEX翻牌图片展示效果.
- jQuery实例:图片展示效果
- JavaScript 图片滑动展示效果
- jQuery实例:图片展示效果
- 数学框架
- Intel众核架构芯片首秀 单颗破万亿次计算
- 浅析Android 4.0的通知系统
- Intel MIC 没有免费的午餐
- 在linux路由上设置IP和MAC绑定
- 图片切换展示效果
- javadoc的使用
- Android应用开发教程:两个运行的Activity之间的通信
- 虾米网签到脚本——Python实现
- 2012年雅思听力词汇 工作流程场景
- 多线程经典入门
- Andriod Recovery模式及ClockworkMod Recovery简介
- android导入外部已存在的数据库大于1M的数据库文件方法
- 渐变弹出层