Front-end code:
Copy codeThe Code is as follows:
<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 = "">
'/> </a> </dt>
</Dl>
</ItemTemplate>
</Asp: Repeater>
</Div>
</Div>
</Div>
<Script type = "text/javascript"> movec (); </script>
Javascript code:
Copy codeThe Code is as follows:
// Selector
Function $ a (id, tag) {var re = (id & typeof id! = "String ")? Id: document. getElementById (id); if (! Tag) {return re;} else {return re. getElementsByTagName (tag );}}
// Click to move the focus scroll chart
Function movec ()
{
Var o = $ a ("bd1lfimg ","");
Var oli = $ a ("bd1lfimg", "dl ");
Var oliw = oli [0]. offsetWidth; // The width of each movement
Var ow = o. offsetWidth-2;
Var dnow = 0; // current location
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 );}
}