轮播02--上下滚动

<!DOCTYPE HTML >

< html >

< head >

< meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" >

< title >轮播图-上下滚动 </ title >

< style >

body,ul,ol{ margin: 0; padding: 0;}

li{ list-style: none;}

img{ border: none; vertical-align: top; }

#box{ width: 470px; height: 150px; position: relative; margin: 30px auto; overflow: hidden;}

ul{ width: 470px; position: absolute; left: 0; top: 0; z-index: 1;}

ul li{ width: 470px; height: 270px }

ol{ z-index: 2; width: 120px; position: absolute; right: 10px; bottom: 10px;}

ol li{ width: 20px; height: 20px; float: left; margin: 0 2px; display: inline; background: #fff; color: #f60; line-height: 20px; text-align: center;}

ol .active{ background: #f60; color: #fff;}

< / style >

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

</ head >

< body >

< div id= "box" >

     < ul >

     < li style= "display:block" >< img src= "images/1.jpg" alt= "" /></ li >

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

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

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

< li >< img src= "images/5.jpg" alt= "" /></ li >

</ ul >

< ol >

     < li class= "active" >1 </ li >

< li >2 </ li >

< li >3 </ li >

< li >4 </ li >

< li >5 </ li >

</ ol >

</ div >

< script >

var oBox= document. getElementById( "box");

     var oUl = document. getElementsByTagName( 'ul')[ 0];

     var aLiUl = oUl. getElementsByTagName( 'li');



     var oOl = document. getElementsByTagName( 'ol')[ 0];

     var aLiOl = oOl. getElementsByTagName( 'li');

var oneHeight = aLiUl[ 0]. offsetHeight;

var iNow= 0;

var timer= null;

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

console. log( oneHeight);

         aLiOl[ i]. index = i;

         aLiOl[ i]. onmouseover = function(){

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

                 aLiOl[ i]. className = '';

            }

this. className = 'active';

iNow = this. index;

startMove( oUl,{ top:- this. index* oneHeight})

        };

};

timer= setInterval( run, 2000);

oBox. onmouseover= function(){

clearInterval( timer)

};

oBox. onmouseout= function(){

timer= setInterval( run, 2000);

};

function run(){

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

iNow= 0

} else{

iNow++;

}

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

aLiOl[ i]. className = '';

}

aLiOl[ iNow]. className = 'active';

console. log( iNow);

startMove( oUl,{ top:- iNow* oneHeight});

}

< / script >

</ body >

</ html >

猜你喜欢