水平滚动图片效果:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd" > <HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <META http-equiv=Content-Type content="text/html; charset=utf-8"> <SCRIPT language=javascript src="jquery-1.6.js" type=text/javascript></SCRIPT> <style type="text/css" > .margin_18 { MARGIN-RIGHT: 18px } #runbox { DISPLAY: block; OVERFLOW: hidden; WIDTH: 618px; HEIGHT: 87px } #runboxpic { FLOAT: left; HEIGHT: 87px } #runboxpic A { DISPLAY: block; FLOAT: left } .bold { FONT-WEIGHT: bold } #runactbox { DISPLAY: block; OVERFLOW: hidden; WIDTH: 873px; HEIGHT: 156px } img{ border:0px;} div{ margin:1px;} </style> <BODY> <TABLE class=hd_bg cellSpacing=0 cellPadding=0 width="100%" align=center border=0> <TBODY> <TR vAlign=top> <TD><TABLE style="MARGIN-TOP: 36px; MARGIN-BOTTOM: 23px" cellSpacing=0 cellPadding=0 width=1099 align=center border=0> <TBODY> <TR> <TD><TABLE style="MARGIN-TOP: 20px; MARGIN-BOTTOM: 10px" cellSpacing=0 cellPadding=0 width=943 border=0> <TBODY> <TR> <TD vAlign=top width=35><IMG class=hand id=runleftbtn style="MARGIN-TOP: 40px" height=26 src="http://www.33fly.com/University/images/hd_30.gif" width=18></TD> <TD class=hd_img vAlign=top width=873><DIV id=runactbox> <DIV id=runboxpic> <DL class=margin_18> <DT><A title=333 href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531140458.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=6" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=55555555555 href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531184426.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=8" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=666 href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531185339.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=9" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=888 href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531185518.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=10" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=899 href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/201171191915.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=12" target=_blank></A></DD> </DL> <DL class=margin_18> <DT><A title=556 href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" target=_blank><IMG height=100 src="http://www.33fly.com/University/Team/photo/2011531201905.jpg" width=154 ></A> <DD><A class=orange1 href="http://www.33fly.com/University/Team/Actview.aspx?aid=13" target=_blank></A></DD> </DL> </DIV> </DIV></TD> <TD vAlign=top align=right width=35><IMG class=hand id=runrightbtn style="MARGIN-TOP: 40px" height=26 src="http://www.33fly.com/University/images/hd_31.gif" width=18></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> <script type="text/javascript" src="JQPI.js" ></script>
JQPI.js源码:jQuery.hor={ box:null, pic:null, runx:null, runover:function (){ clearInterval(jQuery.hor.runx);}, run2:function(a){ if(this.pic.offsetWidth-this.box.scrollLeft<=0){ jQuery.hor.box.scrollLeft-=this.pic.offsetWidth; }else{ this.box.scrollLeft+=a; } }, runSpeed:10, runStar:function(a){$.hor.runx=setInterval("jQuery.hor.run2("+a+")",$.hor.runSpeed);}, run:function(options){ var defaults = { boxid:"", leftbtn:"", rightbtn:"", leftbtn:"", rightbtn:"" } var o = $.extend(defaults, options); this.box=$('#'+o.boxid)[0]; this.pic=$('>*',this.box)[0]; $(this.pic).height(o.boxh); $(this.pic).width(o.boxw*$(">*",this.pic).length); $("#"+o.leftbtn).attr("alt","点住不放可以快速向左滚动").css({"cursor":"pointer"}); $("#"+o.rightbtn).attr("alt","点住不放可以快速向右滚动").css({"cursor":"pointer"}); $("#"+o.leftbtn).mousedown(function(){$.hor.runover();$.hor.runStar(-3)}).mouseup(function(){$.hor.runover();$.hor.runStar(-1)}).mouseover(function(){ $.hor.runStar(-1)}).mouseout(function(){$.hor.runover();}); $("#"+o.rightbtn).mousedown(function(){ $.hor.runover(); $.hor.runStar(3) }).mouseup(function(){ $.hor.runover(); $.hor.runStar(1) }).mouseover(function(){ $.hor.runStar(1) }).mouseout(function(){ $.hor.runover(); }); } } jQuery.hor.run({ boxid:"runactbox", boxh:"156", boxw:"178", leftbtn:"runleftbtn", rightbtn:"runrightbtn", leftbtn:"runleftbtn", rightbtn:"runrightbtn" });