| 文章简介：js网页制作实例，自动轮播广告的实例，用JS实现，面向对象的方法实现的！网页教学网网友如果有喜欢的可以拿去修改！ |
js网页制作实例，自动轮播广告的实例，用JS实现，面向对象的方法实现的！网页教学网网友如果有喜欢的可以拿去修改！
01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02.<html xmlns="http://www.w3.org/1999/xhtml"><head>
03.<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
04.<title>向下自动轮播图片的特效（面向对象版）-网页教学网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;}
09.#box{position:relative;width:492px;height:153px;background:#fff;border-radius:5px;border:8px solid #fff;margin:10px auto;cursor:pointer;}
10.#box .list{position:relative;width:490px;height:150px;overflow:hidden;margin-top:5px;}
11.#box .list ul{position:absolute;top:0;left:0;}
12.#box .list li{width:490px;height:170px;overflow:hidden;}
13.#box .list li img{ border:5px solid black}
14.#box .count{position:absolute;right:0;bottom:-30px;}
15.#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}
16.#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.{
26. var oThis = this;
27. this.oBox = $(id);
28. this.oUl = $("ul", this.oBox)[0];
29. this.oli = $("li", this.oBox);
30. this.aImg = $("img", this.oBox);
31. this.timer = null;
32. this.autoTimer = null;
33. this.iNow = 0;
34. this.creatBtn();/*方法一*/
35. this.aBtn = $("li", this.oCount);
36. /*this.toggle();*/
37. this.autoTimer = setInterval(function (){oThis.next()}, 2000);
38. this.oBox.onmouseover = function ()
39. {clearInterval(oThis.autoTimer)};
40. this.oBox.onmouseout = function ()
41. {oThis.autoTimer = setInterval(function (){oThis.next()}, 2000)};
42. for (var i = 0; i < this.aBtn.length; i++)
43. {
44. this.aBtn[i].index = i;
45. this.aBtn[i].onmouseover = function (){oThis.iNow = this.index;oThis.toggle()}
46. }
47.},
48.
49.creatBtn:function(){
50. this.oCount = document.createElement("ul");
51. this.oFrag = document.createDocumentFragment();
52. this.oCount.className = "count";
53. for (var i = 0; i < this.aImg.length; i++)
54. {
55. var oLi = document.createElement("li");
56. oLi.innerHTML = i + 1;
57. this.oFrag.appendChild(oLi);
58. }
59. this.oBox.appendChild(this.oCount);
60. this.oCount.appendChild(this.oFrag);
61.},
62.
63.toggle: function ()
64.{0
65. for (var i = 0; i < this.aBtn.length; i++) this.aBtn[i].className = "";
66. this.aBtn[this.iNow].className = "current";
67. this.doMove(-(this.iNow * (this.oli[0].offsetHeight)))
68.},
69.next: function ()
70.{
71. this.iNow++;
72. this.iNow == this.aBtn.length && (this.iNow = 0);
73. this.toggle()
74.},
75.doMove:function(iTarget)
76.{
77. var oThis = this;
78. clearInterval(oThis.timer);
79. oThis.timer = setInterval(function ()
80. {var iSpeed = (iTarget - oThis.oUl.offsetTop)/5;
81. iSpeed = iSpeed > 0 ?Math.ceil(iSpeed) : Math.floor(iSpeed);
82. 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.</head>
92.
93.<body>
94.<div id="box">
95. <div class="list">
96. <ul >
97. <li><a href="#"><img src="图片地址" /></a></li>
98. <li><a href="#"><img src="图片地址" /></a></li>
99. <li><a href="#"><img src="图片地址" /></a></li>
100. <li><a href="#"><img src="图片地址" /></a></li>
101. <li><a href="#"><img src="图片地址" /></a></li>
102. <li><a href="#"><img src="图片地址" /></a></li>
103. <li><a href="#"><img src="图片地址" /></a></li>
104. <li><a href="#"><img src="图片地址" /></a></li>
105. <li><a href="#"><img src="图片地址" /></a></li>
106. <li><a href="#"><img src="图片地址" /></a></li>
107. <li><a href="#"><img src="图片地址" /></a></li>
108. <li><a href="#"><img src="图片地址" /></a></li>
109. <li><a href="#"><img src="图片地址" /></a></li>
110. <li><a href="#"><img src="图片地址" /></a></li>
111. <li><a href="#"><img src="图片地址" /></a></li>
112. <li><a href="#"><img src="图片地址" /></a></li>
113. <li><a href="#"><img src="图片地址" /></a></li>
114. <li><a href="#"><img src="图片地址" /></a></li>
115. <li><a href="#"><img src="图片地址" /></a></li>
116. <li><a href="#"><img src="图片地址" /></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>
</html>