版本1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>图片滚动</title>
<script type="text/javascript" src="../jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
var cur =0 ;
$(function(){
$("li").bind("mouseover",function(o){
var v =-(cur=this.innerHTML*1-1)*170 ;
$("#scrollContent").stop().animate({"top":v},450);
$("li").css({"color":"#EC5604","background":"#F6F6F6"}).eq(cur).css({"color":"white","background":"#EC5604"});;
});
});
setInterval(function(){$("li").eq(cur).mouseover();cur=cur+1!=5?cur+1:0;},3000);
</script>
<style type="text/css">
#scrollFarme{
width:490px;
height:170px;
overflow:hidden;
position:relative;
}
#scrollContent{
position:absolute;
}
#scrollButton {
position:absolute;
right:0;
top:130px;
}
#scrollButton li{
float:left;
display:block;
width:20px;
height:20px;
color:#EC5604;
background:#F6F6F6;
line-height:20px;
margin:1px;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<br/>
<div id="scrollFarme">
<div id="scrollContent">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.png" />
<img src="4.png" />
<img src="5.jpg" />
</div>
<ul id="scrollButton">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
版本2 基于oop设计
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE> scroll </TITLE>
<script type="text/javascript" src="../jquery-1.2.6.pack.js"></script>
<style type="text/css">
#scrollFarme{
width:490px;
height:170px;
overflow:hidden;
position:relative;
}
#scrollContent{
position:absolute;
}
#scrollBtns{
position:absolute;
right:2px;
top:132px;
}
#scrollBtns li{
float:left;
display:block;
width:20px;
height:20px;
margin:1px;
text-size:12px;
text-align:center;
background:#F6F6F6;
color:#E27135;
line-height:22px;
cursor:pointer;
}
</style>
<script tyep="text/javascript">
function Player(btns,scrollContent){
this.btns=btns;
this.scrollContent=scrollContent;
this.cur={index:1};
this.interval=null;
for(var k=0;k<this.btns.length;k++)
bindScroll(k);
var __this=this;
function bindScroll(j){
btns[j].onmouseover=function(){
__this.next(j);
__this.stop();
}
btns[j].onmouseout=function(){
__this.cur.index=(j);
__this.start();
}
}
this.next(0);
}
Player.prototype={
start:function(){
var __this=this;
this.interval=setInterval(function(){
__this.next(__this.cur.index);
__this.cur.index=(__this.cur.index+1)==__this.btns.length?0:(__this.cur.index+1);
},2000);
},
next:function(i){
this.setStyle(this.btns[i]);
$(this.scrollContent).stop().animate({top:(-i*170)},500);
},
stop:function(){
clearInterval(this.interval);
},
setStyle:function(o){
$(this.btns).css({"color":"#E27135","background":"#F6F6F6","font-weight":""});
$(o).css({"color":"white","background":"#E27135","font-weight":"bold"});
}
}
$(function(){
var btns = $("li").get();
var scrollContent = $("#scrollContent").get(0);
var player = new Player(btns,scrollContent);
player.start();
});
</script>
</HEAD>
<BODY>
<div style="margin-left:50px">
<div id="scrollFarme">
<div id="scrollContent">
<img src="1.png"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.png"/>
</div>
<ul id="scrollBtns">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</BODY>
</HTML>
版本3
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>作业：五张图片轮换广告</TITLE>
<STYLE type="text/css">
.font-scroll{width:15px; text-align:center; padding-top:1px;cursor:hand;border:1 #414141 solid; font-size:9px;line-height:10px;}
</STYLE>
<SCRIPT language="JavaScript">
var NowFrame = 1;
var MaxFrame = 5;
function scroll1(d1) {
if(Number(d1)){
clearTimeout(theTimer); //当触动按扭时，清除计时器
NowFrame=d1; //设当前显示图片
}
for(var i=1;i<(MaxFrame+1);i++){
if(NowFrame==i){
document.getElementById(NowFrame).style.display='block'; //当前显示图片
document.getElementById('bg'+NowFrame).color="#ff0000";
document.getElementById('bg'+NowFrame).style.backgound="red";
}
else
{
document.getElementById(i).style.display='none';
document.getElementById('bg'+i).color="#414141";
}
}
{ if(NowFrame == MaxFrame) //设置下一个显示的图片
NowFrame = 1;
else
NowFrame++;}
theTimer=setTimeout('scroll1()', 3000); //设置定时器，显示下一张图片
}
</SCRIPT>
</HEAD>
<BODY onLoad="scroll1()">
<div style="width:300px; border:1px solid red">
<DIV>
<IMG src="a.jpg" id="1" width="300" height="160" style="display:none;">
<IMG src="b.jpg" id="2" width="300" height="160" style="display:none;">
<IMG src="c.jpg" id="3" width="300" height="160" style="display:none;">
<IMG src="d.jpg" id="4" width="300" height="160" style="display:none;">
<IMG src="a.jpg" id="5" width="300" height="160" style="display:none;">
<DIV style="position:relative;float:right;z-index:2;margin-top:-15px">
<FONT class="font-scroll" id="bg1"><SPAN onMouseMove="scroll1(1)">1</SPAN></FONT>
<FONT class="font-scroll"id="bg2"><SPAN onMouseMove="scroll1(2)">2</SPAN></FONT>
<FONT class="font-scroll"id="bg3"><SPAN onMouseMove="scroll1(3)">3</SPAN></FONT>
<FONT class="font-scroll"id="bg4"><SPAN onMouseMove="scroll1(4)">4</SPAN></FONT>
<FONT class="font-scroll"id="bg5"><SPAN onMouseMove="scroll1(5)">5</SPAN></FONT>
</DIV>
</DIV>
</div>
</BODY>
</HTML>
