8.14 图片滚动无缝

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'imgplay.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<style type="text/css">
/*play_box*/
.play_box{
980px;
height:290px;
position:relative;
margin-left:auto;
margin-right:auto;
}
.sub_box{
680px;
height:280px;
position:absolute;
left:0;
overflow:hidden;
z-index:0;
border-bottom:0px solid red;
}
.sub_box img{border:none; 100%; height:100%;}
#bd1lfimg{position:absolute; 680px; height:280px; overflow:hidden;}
#bd1lfimg div{100000px; margin-left:-4px;}
#bd1lfimg dl{680px; height:280px; position:relative; overflow:hidden; float:left;}
#bd1lfimg dt{680px; height:280px; position:absolute; left:0px; top:0px;}
.sub_nav{680px; height:26px; position:absolute;bottom:10px; z-index:200; }
.sub_nobg{
680px; height:26px; position:absolute;background-color: #000;
filter:alpha(opacity=30);opacity:0.3;
}
.sub_no{ position:absolute;top:-8px;right:10px; }
.sub_no li{
display:block; 12px; height:12px; float:left; overflow:hidden; padding-left:7px;
vertical-align:middle; text-align:center; background:url(images/page.png) no-repeat; cursor:pointer;
}
.sub_no li.show{ background:url(images/pageon.png) no-repeat;}
</style>
</head>

<body>
<div class="play_box">
<div class="sub_box">
<div id="bd1lfimg">
<div>
<dl class="show"></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
<dl><dt><img alt="ad_pic" src="images/ad_pic1.jpg"/></dt></dl>
</div>
</div>
</div>
<div id="p-select" class="sub_nav">
<div class="sub_nobg"></div>
<div class="sub_no" id="bd1lfsj">
<ul>
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>

</div>
<script type="text/javascript">
function $a(id,tag){var re=(id&&typeof id!="string")?id:document.getElementById(id);if(!tag){return re;}else{return re.getElementsByTagName(tag);}}
function movec()
{
var o=$a("bd1lfimg","");
var oli=$a("bd1lfimg","dl");
var oliw=oli[0].offsetWidth; //每次移动的宽度
var ow=o.offsetWidth-2;
var dnow=0; //当前位置
var olf=oliw-(ow-oliw+10)/2;
o["scrollLeft"]=olf+(dnow*oliw);
var rqbd=$a("bd1lfsj","ul")[0];
var extime;

/*for(var i=1;i<oli.length;i++){rqbd.innerHTML+="<li>"+i+"</li>";}*/
var rq=$a("bd1lfsj","li");
for(var i=0;i<rq.length;i++){reg(i);};
oli[dnow].className=rq[dnow].className="show";
var wwww=setInterval(uu,2000);

function reg(i){rq[i].onclick=function(){oli[dnow].className=rq[dnow].className="";dnow=i;oli[dnow].className=rq[dnow].className="show";mv();}}
function mv(){clearInterval(extime);clearInterval(wwww);extime=setInterval(bc,15);wwww=setInterval(uu,2000);}
function bc()
{
var ns=((dnow*oliw+olf)-o["scrollLeft"]);
var v=ns>0?Math.ceil(ns/10):Math.floor(ns/10);
o["scrollLeft"]+=v;if(v==0){clearInterval(extime);oli[dnow].className=rq[dnow].className="show";v=null;}
}
function uu()
{
if(dnow<oli.length-2)
{
oli[dnow].className=rq[dnow].className="";
dnow++;
oli[dnow].className=rq[dnow].className="show";
}
else{oli[dnow].className=rq[dnow].className="";dnow=0;oli[dnow].className=rq[dnow].className="show";}
mv();
}
o.onmouseover=function(){var ns1=((dnow*oliw+olf)-o["scrollLeft"]);if(ns1==0)clearInterval(extime);clearInterval(wwww);}
o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,2000);}

}
</script>
<script type="text/javascript">movec();</script>
</body>
</html>