javascript实现焦点滚动图效果 具体方法
2013-06-24 11:54
766 查看
前台代码:
复制代码 代码如下:<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);}
}
您可能感兴趣的文章:
相关文章推荐
- javascript实现焦点滚动图效果 具体方法
- 使用JavaScript实现连续滚动字幕效果的方法
- JavaScript实现滚动栏效果的方法
- javascript实现焦点滚动图效果
- javascript实现焦点滚动图效果
- javascript实现焦点滚动图效果
- 使用JavaScript实现连续滚动字幕效果的方法
- JavaScript实现滚动栏效果的方法
- javascript实现跳转菜单的具体方法
- javascript实现文字图片上下滚动的具体实例
- Android 文字自动滚动(跑马灯)效果的两种实现方法[特别好使]
- jQuery视差滚动效果网页实现方法经验总结
- Android 文字自动滚动(跑马灯)效果的两种实现方法
- js仿土豆网带缩略图的焦点图片切换效果实现方法
- 最精简的JavaScript实现鼠标拖动效果的方法
- javascript setTimeOut方法 实现滑动效果(类似2D加速)
- JavaScript实现多个重叠层点击切换效果的方法
- 用DIV+javascript实现首尾相连循环滚动效果(兼容firefox)
- javaScript实现焦点轮播图界面效果(五)
- android TextView不用获得焦点实现跑马灯效果 两种方法