javascript实现焦点滚动图效果

来源:互联网 发布:js天气代码大全 编辑:程序博客网 时间:2024/05/17 02:15



前台代码:

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


原创粉丝点击