img Scroll滚动

js代码

var  $  = function (id)
{
   return   " string " ==   typeof  id  ?  document.getElementById(id):id;

}

var  Class =
{
   create: function ()
   {
      return   function ()
     {
        this .initialize.apply( this ,arguments);
     }
   }
}

Object.extend =   function (destination,source)
{
     for ( var  property  in  source)
    {
      destination[property]  =  source[property];
    }
     return  destination;
}

function  addEventHandler(oTarget,sEventType,fnHandler)
{
     if (oTarget.addEventListener)
    {
       oTarget.addEventListener(sEventType,fnHandler, false );
    }
     else   if (oTarget.attachEvent)
    {
      oTarget.attachEvent( " on " + sEventType,fnHandler);
    }
     else
    {
      oTarget[ " on " + sEventType] = fnHandler;
    }
}

var  Scroller =  Class.create();

Scroller.prototype =
{
   initialize: function (idScroller,idScrollMid,idScrollLeft,idScrollRight,options)
   {
      var  oScroll  =   this ,oScroller =  $(idScroller),oScrollMid =  $(idScrollMid); 
     
      this .widthScroller  = oScroller.offsetWidth;
      this .widthList =  oScrollMid.offsetWidth;
     
      if ( this .widthList < this .widthScroller)
     {
         return ;
     }
     
     oScroller.style.overflow =   " hidden " ;
     
     oScrollMid.appendChild(oScrollMid.cloneNode( true ));
     
      this .oScroller  = oScroller;
     
      this .scroll =   true ;
     
      this .SetOptions(options);
     
      this .side = 1 ;
     
      switch ( this .options.Side)
     {
        case   " right " :
           this .side =- 1 ;
           break ;
        case   " left " :
        default :
             this .side = 1 ;
     }
     
     addEventHandler(oScrollMid, " mouseover " , function (){ oScroll.scroll = false ; });
     addEventHandler(oScrollMid, " mouseout " , function (){ oScroll.scroll = true ; });
     
      if (idScrollLeft)
     {
       addEventHandler($(idScrollLeft), " click " , function (){ oScroll.side = 1 ; });
     }
      if (idScrollRight) 
     {
       addEventHandler($(idScrollRight), " click " , function (){ oScroll.side =- 1 ; });
     }
     
      this .Scroll();
   },

    SetOptions: function (options)
   {
       this .options =
      {
        Step: 1 ,
        Time: 5 ,
        Side: " left "
      }
      Object.extend( this .options,options  ||  {});

    },

  Scroll: function ()
  {
    if ( this .scroll)
   {
      var  iScroll =   this .oScroller.scrollLeft,iWidth =   this .widthList;
     
      if ( this .side > 0 )
     {
        if (iScroll >=  (iWidth *   2   -   this .widthScroller))
       {
         iScroll  -=  iWidth;
       }
     }
      else
     {
        if (iScroll <= 0 )
       {
         iScroll +=  iWidth;
       }
     }
      this .oScroller.scrollLeft =  iScroll + this .options.Step  *   this .side; //
   
   }
    var  oScroll  =   this ;
   window.setTimeout( function (){ oScroll.Scroll(); }, this .options.Time);
   }
}

window.onload =   function ()
{
    new  Scroller( " idScroller " , " idScrollMid " ,  " idScrollLeft " ,  " idScrollRight " );

}

 

前台代码

< body >
     < div  id ="idScroller"  style ="width:290px; overflow:hidden" >
     < div  style ="width:2000px" >
     < div  id ="idScrollMid"  style ="float:left;" >
       < div  style ="float:left" >   < img   src ="images/pic1.jpg"  width ="160px"  height ="99px;" />   </ div >
       < div  style ="float:left" >   < img  src ="images/pic2.jpg"  width ="160px"  height ="107px;" />   </ div >
     </ div >
</ div >
</ div >
< input  id ="idScrollLeft"  type ="button"  value ="向左"   />
< input  id ="idScrollRight"  type ="button"  value ="向右"   />
</ body >