前台代码：
复制代码 代码如下:
<div>
<div id="p-select">
<div id="bd1lfsj">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</div>
<div id="bd1lfimg">
<div>
<dl>
</dl>
<asp:Repeater ID="repTopPicture" runat="server">
<ItemTemplate>
<dl>
<dt><a href="">
<img src='<%#Eval("ImageUrl")%>' /></a></dt>
</dl>
</ItemTemplate>
</asp:Repeater>
</div>
</div>
</div>
<script type="text/javascript"> movec();</script>
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;
<>
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,8000);}
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(){clearInterval(wwww);}
o.onmouseout=function(){extime=setInterval(bc,15);wwww=setInterval(uu,8000);}
}
【javascript实现焦点滚动图效果 具体方法】相关文章：
★ javascript实现在网页任意处点左键弹出隐藏菜单的方法
★ Javascript中prototype属性实现给内置对象添加新的方法
★ javascript实现Table间隔色以及选择高亮的方法