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[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 >

转载于:https://www.cnblogs.com/yunshangwuyou/p/9709807.html