javascript for 不间断的图片滚动 - 可点击

 

CSS样式

   
     

    
      
    
      <style type="text/css">
 .rollBox
 
    
      {
    
      
 width
    
      :
    
       704px
    
      ;
    
      
 overflow
    
      :
    
       hidden
    
      ;
    
      
 padding
    
      :
    
       12px 0 5px 6px
    
      ;
    
      
 
    
      }
    
      
 .rollBox .LeftBotton
 
    
      {
    
      
 height
    
      :
    
       52px
    
      ;
    
      
 width
    
      :
    
       19px
    
      ;
    
      
 background
    
      :
    
       url(jt.gif) no-repeat 11px 0
    
      ;
    
      
 overflow
    
      :
    
       hidden
    
      ;
    
      
 float
    
      :
    
       left
    
      ;
    
      
 display
    
      :
    
       inline
    
      ;
    
      
 margin
    
      :
    
       25px 0 0 0
    
      ;
    
      
 cursor
    
      :
    
       pointer
    
      ;
    
      
 background-color
    
      :
    
      Blue
    
      ;
    
      
 color
    
      :
    
      White
    
      ;
    
      
 
    
      }
    
      
 .rollBox .RightBotton
 
    
      {
    
      
 height
    
      :
    
       52px
    
      ;
    
      
 width
    
      :
    
       20px
    
      ;
    
      
 background
    
      :
    
       url(jt.gif) no-repeat -8px 0
    
      ;
    
      
 overflow
    
      :
    
       hidden
    
      ;
    
      
 float
    
      :
    
       left
    
      ;
    
      
 display
    
      :
    
       inline
    
      ;
    
      
 margin
    
      :
    
       25px 0 0 0
    
      ;
    
      
 cursor
    
      :
    
       pointer
    
      ;
    
      
 background-color
    
      :
    
      Blue
    
      ;
    
      
 color
    
      :
    
      White
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont
 
    
      {
    
      
 width
    
      :
    
       663px
    
      ;
    
      
 overflow
    
      :
    
       hidden
    
      ;
    
      
 float
    
      :
    
       left
    
      ;
    
      
 
    
      }
    
      
 .rollBox .ScrCont
 
    
      {
    
      
 width
    
      :
    
       10000000px
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont .pic
 
    
      {
    
      
 width
    
      :
    
       132px
    
      ;
    
      
 float
    
      :
    
       left
    
      ;
    
      
 text-align
    
      :
    
       center
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont .pic img
 
    
      {
    
      
 padding
    
      :
    
       4px
    
      ;
    
      
 background
    
      :
    
       #fff
    
      ;
    
      
 border
    
      :
    
       1px solid #ccc
    
      ;
    
      
 display
    
      :
    
       block
    
      ;
    
      
 margin
    
      :
    
       0 auto
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont .pic p
 
    
      {
    
      
 line-height
    
      :
    
       26px
    
      ;
    
      
 color
    
      :
    
       #505050
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont a:link, .rollBox .Cont a:visited
 
    
      {
    
      
 color
    
      :
    
       #626466
    
      ;
    
      
 text-decoration
    
      :
    
       none
    
      ;
    
      
 
    
      }
    
      
 .rollBox .Cont a:hover
 
    
      {
    
      
 color
    
      :
    
       #f00
    
      ;
    
      
 text-decoration
    
      :
    
       underline
    
      ;
    
      
 
    
      }
    
      
 .rollBox #List1, .rollBox #List2
 
    
      {
    
      
 float
    
      :
    
       left
    
      ;
    
      
 
    
      }
    
      
 </style>
   
     

 

HTML

   
     

    
      
    
       
    
      <
    
      div 
    
      class
    
      ="rollBox"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="LeftBotton"
    
       onmousedown
    
      ="ISL_GoUp()"
    
       onmouseup
    
      ="ISL_StopUp()"
    
       onmouseout
    
      ="ISL_StopUp()"
    
      >
    
      
 
    
      <
    
      <<<<
 </div
    
      >
    
      
 
 
    
      <
    
      div 
    
      class
    
      ="Cont"
    
       id
    
      ="ISL_Cont"
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="ScrCont"
    
      >
    
      
 
    
      <
    
      div 
    
      id
    
      ="List1"
    
      >
    
      
 
    
      <!--
    
       图片列表 begin 
    
      -->
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品1
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品2
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品3
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品4
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品5
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品6
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      class
    
      ="pic"
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      
 
    
      <
    
      img 
    
      src
    
      ="http://www.baidu.com/img/baidu_logo.gif"
    
       width
    
      ="109"
    
       height
    
      ="87"
    
       
    
      /></
    
      a
    
      >
    
      
 
    
      <
    
      a 
    
      href
    
      ="####"
    
      >
    
      商品7
    
      </
    
      a
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <!--
    
       图片列表 end 
    
      -->
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      <
    
      div 
    
      id
    
      ="List2"
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
    
      </
    
      div
    
      >
    
      
 
 
    
      <
    
      div 
    
      class
    
      ="RightBotton"
    
       onmousedown
    
      ="ISL_GoDown()"
    
       onmouseup
    
      ="ISL_StopDown()"
    
       onmouseout
    
      ="ISL_StopDown()"
    
      >
    
      
 >>>>>>
 
    
      </
    
      div
    
      >
    
      
 
    
      </
    
      div
    
      >
   
     

 

JS代码

   
     

    
      
    
      //
    
      速度(毫秒) 
    
      

    
       
    
      var
    
       Speed 
    
      =
    
       
    
      10
    
      ; 
 
 
    
      //
    
      每次移动(px) 
    
      

    
       
    
      var
    
       Space 
    
      =
    
       
    
      5
    
      ; 
 
 
    
      //
    
      每次翻页宽度
    
      

    
       
    
      var
    
       PageWidth 
    
      =
    
       
    
      132
    
      ; 
 
 
    
      //
    
      整体移位(px)
    
      

    
       
    
      var
    
       fill 
    
      =
    
       
    
      0
    
      ; 
 
 
    
      //
    
      是否自动移动，true 移动，false 不移动
    
      

    
       
    
      var
    
       MoveLock 
    
      =
    
       
    
      false
    
      ; 
 
 
    
      //
    
      移动时间对象
    
      

    
       
    
      var
    
       MoveTimeObj; 
 
 
    
      //
    
      上翻 下翻 变量，当comp小于0 为上翻动 反之为下翻动 
    
      

    
       
    
      var
    
       Comp 
    
      =
    
       
    
      0
    
      ; 
 
 
    
      //
    
      上下移动对象
    
      

    
       
    
      var
    
       AutoPlayObj 
    
      =
    
       
    
      null
    
      ; 
 
 
    
      //
    
      将div List1中的所有元素分配给 div list2中
    
      

    
       GetObj(
    
      "
    
      List2
    
      "
    
      ).innerHTML 
    
      =
    
       GetObj(
    
      "
    
      List1
    
      "
    
      ).innerHTML; 
 
 
    
      //
    
      向左移动
    
      

    
       GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      =
    
       fill; 
 
 
    
      //
    
      给div ISL_Cont 绑定鼠标移动在div上方时候的事件，该事件是清除自动播放的，当鼠标移动到div图片上时候将取消自动播放
    
      

    
       GetObj(
    
      "
    
      ISL_Cont
    
      "
    
      ).onmouseover 
    
      =
    
       
    
      function
    
      (){ clearInterval(AutoPlayObj); } 
 
 
    
      //
    
      给div ISL_Cont 绑定鼠标移开div上方时候的时间，该事件是绑定自动播放的，当鼠标移开div图片上时候将又开始自动时间间隔自动播放
    
      

    
       GetObj(
    
      "
    
      ISL_Cont
    
      "
    
      ).onmouseout 
    
      =
    
       
    
      function
    
      (){ AutoPlay();} 
 
 
    
      //
    
      第一次进来默认绑定为自动播放
    
      

    
       AutoPlay(); 
 
 
    
      /*
    
      
 获取指定html对象 
 
    
      */
    
      
 
    
      function
    
       GetObj(objName){ 
 
 
    
      //
    
      判断当前页面中是否存在有效的元素标记,document.getElementById兼容火狐
    
      

    
       
    
      if
    
      (document.getElementById)
 {
 
    
      return
    
       eval(
    
      '
    
      document.getElementById("
    
      '
    
      +
    
      objName
    
      +
    
      '
    
      ")
    
      '
    
      )
 } 
 
    
      else
    
      
 {
 
    
      return
    
       eval(
    
      '
    
      document.all.
    
      '
    
      +
    
      objName)
 }
 
 } 
 
 
    
      /*
    
      
 自动滚动 
 
    
      */
    
      
 
    
      function
    
       AutoPlay(){ 
 
 
    
      //
    
      清除以前绑定的间隔时间滚动
    
      

    
       clearInterval(AutoPlayObj); 
 
 
    
      //
    
      重新绑定间隔时间滚动，setInterval()方法是绑定在指定的时间执行，clearInterval()方法是清除指定的时间绑定对象
    
      

    
       AutoPlayObj 
    
      =
    
       setInterval(
    
      '
    
      ISL_GoDown();ISL_StopDown();
    
      '
    
      ,
    
      5000
    
      ); 
 
 } 
 
 
    
      /*
    
      
 上翻开始 
 
    
      */
    
      
 
    
      function
    
       ISL_GoUp(){ 
 
 
    
      //
    
      如过当前为自动播放将不执行下面代码
    
      

    
       
    
      if
    
      (MoveLock) 
 
    
      return
    
      ; 
 
 
    
      //
    
      清除以前绑定的间隔时间滚动 
    
      

    
       clearInterval(AutoPlayObj); 
 
 MoveLock 
    
      =
    
       
    
      true
    
      ; 
 
 
    
      //
    
      在指定的时间中自动往左侧移动
    
      

    
       MoveTimeObj 
    
      =
    
       setInterval(
    
      '
    
      ISL_ScrUp();
    
      '
    
      ,Speed); 
 }
 
 
    
      /*
    
      
 上翻停止 
 
    
      */
    
      
 
    
      function
    
       ISL_StopUp(){
 
 
    
      //
    
      清除以前绑定的间隔时间滚动 
    
      

    
       clearInterval(MoveTimeObj); 

 
    
      //
    
      判断当前论显图片的div做边的变距是否是第一个商品图片,不等于0不是第一个，反之等于第一张图片
    
      

    
       
    
      if
    
      (GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      %
    
       PageWidth 
    
      -
    
       fill 
    
      !=
    
       
    
      0
    
      )
 { 
 
    
      //
    
      div左边距移动 
    
      

    
       Comp 
    
      =
    
       fill 
    
      -
    
       (GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      %
    
       PageWidth); 
 
 
    
      //
    
      开始移动
    
      

    
       CompScr(); 
 
 }
    
      else
    
      
 { 
 MoveLock 
    
      =
    
       
    
      false
    
      ; 
 } 
 
 
    
      //
    
      自动播放
    
      

    
       AutoPlay(); 
 
 } 
 
 
    
      /*
    
      
 上翻动作 
 
    
      */
    
      
 
    
      function
    
       ISL_ScrUp(){
 
 
    
      //
    
      如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度
    
      

    
       
    
      if
    
      (GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      <=
    
       
    
      0
    
      )
 {
 GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      =
    
       GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      +
    
       GetObj(
    
      '
    
      List1
    
      '
    
      ).offsetWidth;
 }
 
 
    
      //
    
      往左侧移动
    
      

    
       GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      -=
    
       Space ; 
 
 } 
 
 
    
      /*
    
      
 下翻 
 
    
      */
    
      
 
    
      function
    
       ISL_GoDown(){
 
 
    
      //
    
      清除以前绑定的间隔时间滚动
    
      

    
       clearInterval(MoveTimeObj); 
 
 
    
      //
    
      如过当前为自动播放将不执行下面代码
    
      

    
       
    
      if
    
      (MoveLock) 
 
    
      return
    
      ; 
 
 
    
      //
    
      清除自动播放 
    
      

    
       clearInterval(AutoPlayObj); 
 
 MoveLock 
    
      =
    
       
    
      true
    
      ; 
 
 
    
      //
    
      下翻方法
    
      

    
       ISL_ScrDown(); 
 
 
    
      //
    
      在指定的时间中自动往右侧移动
    
      

    
       MoveTimeObj 
    
      =
    
       setInterval(
    
      '
    
      ISL_ScrDown()
    
      '
    
      ,Speed); 
 
 } 
 
 
    
      /*
    
      
 下翻停止 
 
    
      */
    
      
 
    
      function
    
       ISL_StopDown(){ 
 
 
    
      //
    
      清除以前绑定的间隔时间滚动 
    
      

    
       clearInterval(MoveTimeObj); 
 
 
    
      //
    
      如过当前图片的大div左边距小于0那么它的边距等于自身边距加上左边的点击按钮的宽度
    
      

    
       
    
      if
    
      (GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      %
    
       PageWidth 
    
      -
    
       fill 
    
      !=
    
       
    
      0
    
       )
 { 
 Comp 
    
      =
    
       PageWidth 
    
      -
    
       GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      %
    
       PageWidth 
    
      +
    
       fill; 
 
 CompScr(); 
 }
    
      else
    
      
 { 
 MoveLock 
    
      =
    
       
    
      false
    
      ; 
 } 
 
 
    
      //
    
      开始自动播放
    
      

    
       AutoPlay(); 
 
 } 
 
 
    
      /*
    
      
 下翻动作 
 
    
      */
    
      
 
    
      function
    
       ISL_ScrDown(){
 
 
    
      if
    
      (GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      >=
    
       GetObj(
    
      '
    
      List1
    
      '
    
      ).scrollWidth)
 {
 GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      =
    
       GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      -
    
       GetObj(
    
      '
    
      List1
    
      '
    
      ).scrollWidth;
 } 
 
 GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      +=
    
       Space; 
 
 } 
 
 
    
      /*
    
      
 左右移动控制处理
 
    
      */
    
      
 
    
      function
    
       CompScr(){ 
 
 
    
      var
    
       num; 
 
 
    
      if
    
      (Comp 
    
      ==
    
       
    
      0
    
      )
 {
 MoveLock 
    
      =
    
       
    
      false
    
      ;
 
 
    
      return
    
      ;
 } 
 
 
    
      //
    
      上翻 
    
      

    
       
    
      if
    
      (Comp 
    
      <
    
       
    
      0
    
      )
 { 
 
    
      if
    
      (Comp 
    
      <
    
       
    
      -
    
      Space)
 { 
 Comp 
    
      +=
    
       Space; 
 num 
    
      =
    
       Space; 
 }
    
      else
    
      
 { 
 num 
    
      =
    
       
    
      -
    
      Comp; 
 Comp 
    
      =
    
       
    
      0
    
      ; 
 }
 
 GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      -=
    
       num; 
 
 setTimeout(
    
      '
    
      CompScr()
    
      '
    
      ,Speed); 
 
 }
    
      else
    
       
    
      //
    
      下翻 
    
      

    
       { 
 
    
      if
    
      (Comp 
    
      >
    
       Space)
 { 
 Comp 
    
      -=
    
       Space; 
 num 
    
      =
    
       Space; 
 }
    
      else
    
      
 { 
 num 
    
      =
    
       Comp; 
 Comp 
    
      =
    
       
    
      0
    
      ; 
 }
 
 GetObj(
    
      '
    
      ISL_Cont
    
      '
    
      ).scrollLeft 
    
      +=
    
       num; 
 
 setTimeout(
    
      '
    
      CompScr()
    
      '
    
      ,Speed); 
 } 
 }