图片左右无间断滚动效果的实现代码

最新推荐文章于 2022-05-17 19:47:08 发布

coffeeing

最新推荐文章于 2022-05-17 19:47:08 发布

阅读量2.8k

点赞数

分类专栏： java/web 文章标签： function border html firefox table ie

本文链接：https://blog.csdn.net/coffeeing/article/details/4522596

版权

java/web 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <title>图片左右滚动示例代码</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="description" content="This is my page">
<script type='text/javascript' src='/voucher/dwr/interface/CartUtil.js'></script>
<script type='text/javascript' src='/voucher/dwr/interface/PrintUtil.js'></script>
<script type='text/javascript' src='/voucher/dwr/interface/VoucherUtil.js'></script>
<script type='text/javascript' src='/voucher/dwr/engine.js'></script>
<script type='text/javascript' src='/voucher/dwr/util.js'></script>
</head>

<body>
<table>
  <tr>
   <td>
    <img src="http://192.168.0.40/voucher/images/left.png" style="cursor: pointer;" οnclick='clearright();toleft()'>
   </td>
   <td>
   <div id="demo" style="overflow: hidden; height: 135px; width: 522px; color: #ff0000">
     <table cellpadding="0" align="left" border="0" cellspacing="0">

      <tr>
       <td id="demo1" width="100%">
       <table cellspacing="0" cellpadding="0" width="522px" border="0">
        <tr>
         <td width="130px">
          <img src="http://192.168.0.40/files/voucher/1251254692421.bmp" width="98" height="114" style="cursor: pointer;"/>
         </td>
         <td>
          <img src="http://192.168.0.40/files/voucher/1251255537296.bmp" width="98" height="114" style="cursor: pointer;"/>
         </td>
         <td>
          <img src="http://192.168.0.40/files/voucher/1251792701484.bmp" width="98" height="114" style="cursor: pointer;"/>
         </td>
         <td>
          <img src="http://192.168.0.40/files/voucher/1251959938359.bmp" width="98" height="114" style="cursor: pointer;"/>
         </td>
         <td>
          <img src="http://192.168.0.40/files/voucher/1251255692421.bmp" width="98" height="114" style="cursor: pointer;"/>
         </td>
        </tr>
       </table>
     </td>
     <td id="demo2" width="100%"></td>
      </tr>
     </table>
    </div>
   </td>
   <td>
   <img src="http://192.168.0.40/voucher/images/right.png" style="cursor: pointer;" οnclick='clearleft();toright()'>
   </td>
  </tr>
</table>
</body>
<script type="text/javascript">

/*
**图片滚动js======================================begin ==============================

**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
*/
var speed1=0 //图片左移的速度
var MyMar1 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var lefthit=0  //记录左移按钮点击次数
var righthit=0 记录右移按钮点击次数
//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
function clearleft(){
clearInterval(MyMar1)
}
//图片左移的方法
function toleft(){
   //判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
   if(lefthit==0){
    speed1=15;//图片左移速度时间毫秒

    //让的内容demo2与demo1内容一样
    document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
    //上行图片移动的方法
    function Marquee1(){
       //当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
     if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
     //demo跳回初始位置
     document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
     }
     else{
     //demo开始重新移动
     document.getElementById("demo").scrollLeft++
     }
    }
    //setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
    MyMar1=setInterval(Marquee1,speed1)
    //当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
    document.getElementById("demo").οnmοuseοver=function()
    {clearInterval(MyMar1);}
    //当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
    document.getElementById("demo").οnmοuseοut=function()
    {MyMar1=setInterval(Marquee1,speed1);}

    lefthit=1  //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
    righthit=0 //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
   }
}

var MyMar3 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var speed2=0 //图片右移的速度
//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
function clearright(){
clearInterval(MyMar3)
}

//图片右移方法(与图片左移方法思路一样)
function toright(){
      //判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
   if(righthit==0){
    speed2=15;
    document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
    function Marquee_a(){
     if(document.getElementById("demo").scrollLeft<=0){
     document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
     }
     else{
    document.getElementById("demo").scrollLeft--
     }
    }
    MyMar3=setInterval(Marquee_a,speed2)
    document.getElementById("demo").οnmοuseοver=function()
    {clearInterval(MyMar3);}
    document.getElementById("demo").οnmοuseοut=function()
    {MyMar3=setInterval(Marquee_a,speed2);}