左右运动轮播图

原文链接： http://www.cnblogs.com/hilxj/p/10547532.html

<!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; display: block; width: 100% }

#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; position: absolute; top: 0;}

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 oneWidth= aLiUl[ 0]. offsetWidth;

var iNow= 0;

var aBtn= true; //定义一个开关，解决连续触发运动

for( var i= 1; i< aLiUl. length; i++){

aLiUl[ i]. style. left= oneWidth+ 'px';

};

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

aLiOl[ i]. index= i;

aLiOl[ i]. onmouseover= function(){

if( aBtn){

aBtn= false;

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

aLiOl[ i]. className= '';

};

if( iNow< this. index){

aLiUl[ this. index]. style. left= oneWidth+ 'px';

startMove( aLiUl[ iNow],{ left:- oneWidth});

} else if( iNow> this. index){

aLiUl[ this. index]. style. left=- oneWidth+ 'px';

startMove( aLiUl[ iNow],{ left:oneWidth});

}

this. className= 'active';

startMove( aLiUl[ this. index],{ left: 0}, function(){

aBtn= true

});

iNow= this. index;

}

}

}

< / script >

</ body >

</ html >

move.js

// JavaScript Document

function startMove( obj, json, endFn){



         clearInterval( obj. timer);



         obj. timer = setInterval( function(){



             var bBtn = true;



             for( var attr in json){



                 var iCur = 0;



                 if( attr == 'opacity'){

                     if( Math. round( parseFloat( getStyle( obj, attr))* 100)== 0){

                     iCur = Math. round( parseFloat( getStyle( obj, attr))* 100);



                    }

                     else{

                         iCur = Math. round( parseFloat( getStyle( obj, attr))* 100) || 100;

                    }

                }

                 else{

                     iCur = parseInt( getStyle( obj, attr)) || 0;

                }



                 var iSpeed = ( json[ attr] - iCur)/ 8;

             iSpeed = iSpeed > 0 ? Math. ceil( iSpeed) : Math. floor( iSpeed);

                 if( iCur!= json[ attr]){

                     bBtn = false;

                }



                 if( attr == 'opacity'){

                     obj. style. filter = 'alpha(opacity=' +( iCur + iSpeed)+ ')';

                     obj. style. opacity = ( iCur + iSpeed)/ 100;



                }

                 else{

                     obj. style[ attr] = iCur + iSpeed + 'px';

                }





            }



             if( bBtn){

                 clearInterval( obj. timer);



                 if( endFn){

                     endFn. call( obj);

                }

            }



        }, 30);



    }





     function getStyle( obj, attr){

         if( obj. currentStyle){

             return obj. currentStyle[ attr];

        }

         else{

             return getComputedStyle( obj, false)[ attr];

        }

    }

转载于:https://www.cnblogs.com/hilxj/p/10547532.html

猜你喜欢