js面向對象輪播圖寫法

<! DOCTYPE html >

< html lang= "en" >

< head >

     < meta charset= "UTF-8" >

     < title >Document </ title >

     < style >

         *{ margin: 0; padding: 0;}

         ul,li{ list-style: none}

         #banner{ width: 800px; height: 400px; margin: 40px auto; position: relative; overflow: hidden;}

         #banner> ul{ position: absolute;}

         #banner> ul> li{ float: left}

         #banner> ul> li> img{ width: 800px; height: 400px;}

         #direction> a{ position: absolute; width: 80px; height: 40px; background: rgba( 0, 0, 0, .6); color: #fff; text-decoration: none; font-size: 30px; top: 180px; text-align: center}

         #direction> a:nth-child( 2 ){ right: 0;}

         #btn{ position: absolute; bottom: 10px; left: 42%;}

         #btn> a{ float: left; margin-left: 5px; width: 20px; height: 20px; background: #fff; border-radius: 50%}

         #btn> .active{ background: #c33;}

     < / style >

</ head >

< body >

     < div id= "banner" >

         < ul >

             < li >< img src= "images/1.jpg" ></ li >

             < li >< img src= "images/2.jpg" ></ li >

             < li >< img src= "images/3.jpg" ></ li >

             < li >< img src= "images/4.jpg" ></ li >

         </ ul >

         < div id= "direction" >

             < a href= "##" > < </ a >

             < a href= "##" >> </ a >

         </ div >

         < div id= "btn" >

             < a href= "##" class= "active" ></ a >

             < a href= "##" ></ a >

             < a href= "##" ></ a >

             < a href= "##" ></ a >

         </ div >

     </ div >

</ body >

</ html >

< script src= "pool.js" > < / script >

< script >

     //獲取元素

/*var banner = document.getElementById("banner");

//獲取ul由於TagName得到的是一個數組，因此得到第0個

var oUl = banner.getElementsByTagName("ul")[0];

var aLi = banner.getElementsByTagName("li");

var aBtn =document.querySelectorAll("#btn>a");

var iW = aLi[0].offsetWidth;

var li = aLi[0].cloneNode(true);

var iNow = 0;

var timer = null;

//先插入克隆的元素在去設置ul的寬度

oUl.appendChild(li);

oUl.style.width = aLi.length*iW+"px";

//移入的時候輪播圖中止

banner.onmouseover = function(){

    clearInterval(timer)

}

//移除的時候輪播圖繼續運行

banner.onmouseout = function(){

    autoPlay()

}

//當作完自動輪播的時候要先去作移入的時候輪播中止 移除的時候輪播繼續運行

autoPlay()

//自動輪播

function autoPlay(){

    timer = setInterval(function(){

        if(iNow == aLi.length-1){

            iNow = 1;

            oUl.style.left = 0;

        }else{

            iNow++;

        }

        toImg()

    },3000)

}

//運動的原理

function toImg(){

    move(oUl,{left:-iNow*iW})

    for(var i=0;i<aBtn.length;i++){

        aBtn[i].className = "";

    }

    aBtn[iNow>3?0:iNow].className = "active";

}

*/

function Banner(){

     this. banner = document. getElementById( "banner");

     this. oUl = this. banner. getElementsByTagName( "ul")[ 0];

     this. aLi = this. banner. getElementsByTagName( "li");

     this. iW = this. aLi[ 0]. offsetWidth;

     this. li = this. aLi[ 0]. cloneNode( true);

     this. iNow = 0;

     this. timer = null;

     this. init();

}

Banner. prototype. init = function(){

     this. oUl. appendChild( this. li);

     this. oUl. style. width = this. aLi. length* this. iW+ "px";

     this. hover();

     this. autoPlay();

}

Banner. prototype. hover = function(){

     var _this = this;

     this. banner. onmouseover = function(){

     clearInterval( _this. timer)

    }   

     this. banner. onmouseout = function(){

         _this. autoPlay()

    }

}

Banner. prototype. autoPlay = function(){

     var _this = this;

     this. timer = setInterval( function(){

         if( _this. iNow == _this. aLi. length- 1){

             _this. iNow = 1;

             _this. oUl. style. left = 0;

        } else{

             _this. iNow++;

        }

         _this. toImg()

    }, 3000)

}

Banner. prototype. toImg = function(){

     move( this. oUl,{ left:- this. iNow* this. iW})

}

var banner = new Banner();

< / script >