(虚心请教)我想做成淘宝首页的广告导航栏

s63403048 2012-03-02 02:49:10
效果就是点击数字1-5
然后图片向上滚动的效果。
我现在已经做好点击数字1-5
图片自动切换的效果。


<!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" />
<title>无标题文档</title>
<style type="text/css">
.number{
background-color:#F00;
float:left;
margin-left:10px;
width:20px;
height:20px;
z-index:3;
}
.numberOver{
float:left;
background-color:#999;
width:15px;
padding-left:5px;
margin-left:5px;
text-align:center;

}
.adv{
width:426px;
height:224px;
border:solid 1px #666;
margin-left:auto;
margin-right:auto;
overflow:hidden;
padding:0px;
z-index:1;
}
.bg{
background-color:#E0E0E0;
height:20px;
width:426px;
border-top:solid 1px #B4B4B4;
margin-left:390px;

}
#dome{
overflow:hidden;
height:240px;
padding:5px;
}
</style>
</head>
<body>
<div class="adv">
<div id="dome">
<div id="dome1">
<img src="adRotator_1.jpg" width="426" height="224" id="rotator1"/>
<img src="adRotator_2.jpg" width="426" height="224" id="rotator2" />
<img src="adRotator_3.jpg" width="426" height="224" id="rotator3" />
<img src="adRotator_4.jpg" width="426" height="224" id="rotator4" />
<img src="adRotator_5.jpg" width="426" height="224" id="rotator5" />
<div id="dome2"></div></div>
</div>
</div></div>
<div class="bg"><div class="number" id="fig_1" onclick="show(1);">1</div>
<div class="number" id="fig_2" onclick="show(2);">2</div>
<div class="number" id="fig_3" onclick="show(3);">3</div>
<div class="number" id="fig_4" onclick="show(4);">4</div>
<div class="number" id="fig_5" onclick="show(5);">5</div>
</div>
<script type="text/javascript">
var title=new Array();
title[0]="1";
title[1]="2";
title[2]="3";
title[3]="4";
title[4]="5";
var NowFrame = 1; //最先显示第一张图片
var MaxFrame = 5; //一共五张图片
function show(d1) {
if(Number(d1)){
clearTimeout(theTimer); //当触动按扭时,清除计时器
NowFrame=d1; //设当前显示图片
}
for(var i=1;i<(MaxFrame+1);i++){
if(i==NowFrame){
document.getElementById("rotator1").src ="adRotator_"+i+".jpg"; //显示当前图片
document.getElementById("fig_"+i).innerHTML=title[i-1]; //显示当前图片对应的标题
document.getElementById("fig_"+i).className="numberOver"; //设置当前标题的CSS样式
}
else{
document.getElementById("fig_"+i).innerHTML=i;
document.getElementById("fig_"+i).className="number";
}
}
if(NowFrame == MaxFrame){ //设置下一个显示的图片
NowFrame = 1;
}
else{
NowFrame++;
}
}
var theTimer=setInterval('show()', 2000); //设置定时器,显示下一张图片
window.onload=show;


</script>
</body>
</html>
...全文
130 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
s63403048 2012-03-03
  • 打赏
  • 举报
回复
请问有相关的代码可以给我参考下吗。
感谢。
s63403048 2012-03-03
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 josephsc 的回复:]

有个牛人写的例子很好,你可以参考一下

http://www.cnblogs.com/Cson/archive/2011/03/30/2000075.html
[/Quote]

非常感谢.
现在学的还比较浅.
有点看不懂
慢慢看吧
感谢分享.
josephSC 2012-03-03
  • 打赏
  • 举报
回复
有个牛人写的例子很好,你可以参考一下

http://www.cnblogs.com/Cson/archive/2011/03/30/2000075.html
s63403048 2012-03-02
  • 打赏
  • 举报
回复
我想过1个方案。
就是当我点击数字1-5的时候
图片的Postion的位置发生改变.
让它能够自己向上移动
但是运行起来没有任何效果。
内容概要:本文详细介绍了利用Simulink进行变压器开路试验的电路连接配置与仿真实现方法,重点在于通过仿真手段还原实际电力系统中变压器在空载条件下的电气特性,从而深入理解其工作原理与性能表现。文章作为电力系统仿真系列研究的一部分,系统阐述了从电路模型搭建、参数设定、仿真运行到结果分析的完整流程,突出展示了MATLAB/Simulink在电力设备建模与教学科研中的强大功能与应用价值。; 适合人群:具备电力系统基础知识,熟悉MATLAB/Simulink仿真环境,从事电气工程、自动化及相关领域的研发人员,以及高年级本科生和研究生。; 使用场景及目标:①掌握变压器开路试验的基本原理与Simulink仿真建模的具体步骤;②通过仿真实验深入理解空载电流、铁芯损耗及励磁特性等关键参数的物理意义;③为后续开展变压器短路试验、暂态过程分析以及其他电力设备的仿真研究奠定理论与实践基础。; 阅读建议:建议结合Simulink软件动手实践,逐步构建并调试电路模型,重点关注各元件参数的设置方法与测量模块的应用技巧,同时推荐参考文中提及的其他相关仿真案例进行拓展学习,以全面提升对电力系统仿真实践的整体认知与操作能力。

87,989

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧