Article Introduction: JS Web page production examples, automatic carousel advertising instances, with JS implementation, object-oriented approach to achieve! Web page Teaching Net friend if have like can take to revise! |
JS Web page production examples, automatic carousel advertising instances, with JS implementation, object-oriented approach to achieve! Web page Teaching Net friend if have like can take to revise!
01.<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
02.
03.<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
04.<title> down automatic carousel Picture effects (object-oriented version)-Web teaching network www.webjx.cm</title>
05.<style>
06.body,div,ul,li{margin:0;padding:0;}
07.ul{list-style-type:none;}
08.body{background: #000; text-align:center;font:12px/20px Arial;
#box {position:relative;width:492px;height:153px;background: #fff; border-radius:5px;border:8px solid #fff; margin:10px Auto;cursor:pointer;}
#box. list{position:relative;width:490px;height:150px;overflow:hidden;margin-top:5px;
#box. List ul{position:absolute;top:0;left:0;}
#box. List Li{width:490px;height:170px;overflow:hidden;}
#box. List Li img{border:5px solid Black}
#box. count{position:absolute;right:0;bottom:-30px;
#box. Count Li{color: #fff; float:left;width:20px;height:20px;cursor:pointer;margin-right:5px;overflow:hidden; Background: #F90; Opacity:0.7;filter:alpha (opacity=70); border-radius:20px; margin:0; Padding:0;s}
#box. Count Li.current{color: #fff; Opacity:1;filter:alpha (opacity=100); Font-weight:700;background: #f60;}
17.
18.</style>
19.<script type= "Text/javascript" >
20.var $ = function (ID) {return typeof id = = "string"? document.getElementById (ID): ID};
21.var $ = function (TagName, oparent) {return (oparent document). getElementsByTagName (TagName)};
22.var autoplay = function (id) {this.initialize (id)};
23.autoplay.prototype = {
24.initialize:function (ID)
25.{
var othis = this;
This.obox = $ (ID);
This.oul = $ ("ul", This.obox) [0];
This.oli = $ ("li", This.obox);
This.aimg = $ ("img", This.obox);
This.timer = null;
This.autotimer = null;
This.inow = 0;
THIS.CREATBTN ()/* Method A/*
THIS.ABTN = $ ("li", this.ocount);
/*this.toggle ();
This.autotimer = setinterval (function () {Othis.next ()}, 2000);
This.oBox.onmouseover = function ()
{clearinterval (Othis.autotimer)};
This.oBox.onmouseout = function ()
{Othis.autotimer = setinterval (function () {Othis.next ()}, 2000)};
for (var i = 0; i < this.aBtn.length; i++)
43. {
This.abtn[i].index = i;
This.abtn[i].onmouseover = function () {Othis.inow = This.index;othis.toggle ()}
46.}
47.},
48.
49.creatbtn:function () {
This.ocount = document.createelement ("ul");
This.ofrag = Document.createdocumentfragment ();
This.oCount.className = "Count";
-for (var i = 0; i < this.aImg.length; i++)
54. {
var oLi = document.createelement ("Li");
oli.innerhtml = i + 1;
This.oFrag.appendChild (OLi);
58.}
This.oBox.appendChild (This.ocount);
This.oCount.appendChild (This.ofrag);
61.},
62.
63.toggle:function ()
64.{0
for (var i = 0; i < this.aBtn.length; i++) this.abtn[i].classname = "";
This.abtn[this.inow].classname = "current";
This.domove (-(This.inow * (this.oli[0].offsetheight))
68.},
69.next:function ()
70.{
this.inow++;
This.inow = = This.aBtn.length && (this.inow = 0);
This.toggle ()
74.},
75.domove:function (ITarget)
76.{
var othis = this;
Clearinterval (Othis.timer);
Othis.timer = setinterval (function ()
{var ispeed = (itarget-othis.oul.offsettop)/5;
Bayi. ispeed = ispeed > 0? Math.ceil (ispeed): Math.floor (Ispeed);
OThis.oUl.offsetTop = = ITarget? Clearinterval (Othis.timer): (oThis.oUl.style.top = oThis.oUl.offsetTop + ispeed + "px")},
83.
84.30)
85.}
86.
87.};
88.window.onload = function () {New AutoPlay ("box");
89.</script>
90.
91.
92.
93.<body>
94.<div id= "box" >
<div class= "List" >
<ul >
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
102. <li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
108. <li><a href= "#" ></a></li>
109. <li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
112. <li><a href= "#" ></a></li>
113. <li><a href= "#" ></a></li>
114. <li><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
116. <li><a href= "#" ></a></li>
117.
118. </ul>
119. </div>
120.<ul class= "Count" style= "Display:none;" ><li class= "" >1</li><li class= "" >2</li><li class= "current" >3</li><li Class= "" >4</li><li class= "" >5</li></ul></div>
121.</body>