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

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>

...全文

132 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]

非常感谢.
现在学的还比较浅.
有点看不懂
慢慢看吧
感谢分享.