JS面向对象的方法实现向下轮播图片广告代码

http://www.itjxue.com  2015-08-06 23:00  来源:未知  点击次数: 

js网页制作实例,自动轮播广告的实例,用JS实现,面向对象的方法实现的!IT教学网网友如果有喜欢的可以拿去修改!

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>向下自动轮播图片的特效(面向对象版)-IT教学网www.itjxue.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>

(责任编辑:IT教学网)

更多

推荐Javascript/Ajax文章