js相册
版本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; elseNowFrame++;} 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 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>