javascript实现焦点滚动图效果 具体方法

时间:2021-05-26

前台代码:

复制代码 代码如下:
<div class="sub_box">
<div id="p-select" class="sub_nav">
<div class="sub_no" id="bd1lfsj">
<ul>
<li class="show">1</li>
<li class="">2</li>
<li class="">3</li>
<li class="">4</li>
<li class="">5</li>
<li class="">6</li>
<li class="">7</li>
</ul>
</div>
</div>
<div id="bd1lfimg">
<div>
<dl class="show">
</dl>
<asp:Repeater ID="repTopPicture" runat="server">
<ItemTemplate>
<dl class="">
<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;

<!--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,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);}
}

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章