JQuery的无缝滚动

最新推荐文章于 2023-07-24 15:51:51 发布

weixin_30448603

最新推荐文章于 2023-07-24 15:51:51 发布

阅读量89

点赞数

原文链接：http://www.cnblogs.com/wei-91/p/6079943.html

版权

图片无缝向左滚动的代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
      <td id="demo2" valign="top"></td>
    </tr>
  </table>
</div>
<script type="text/javascript">
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
    if(demo.scrollLeft()>=demo1.width())
        demo.scrollLeft(0);
    else{
        demo.scrollLeft(demo.scrollLeft()+1);
    }
}
var MyMar=setInterval(Marquee,speed)
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollLeft());
}
function fun2(){
    alert(demo1.width());
}
</script>
<input type="button"  value="显示demo.scrollLeft()" οnclick="fun1();"/>
<input type="button"  value="显示demo1.width())" οnclick="fun2();"/>
</body>
</html>

那二个按钮主要是为了自己观察值的变化之用，正式使用中可以去掉。

向右无缝滚动的HTML同上，只是js脚本中的Marquee函数不同，代码如下：

function Marquee(){
    if(demo.scrollLeft()==0){
        demo.scrollLeft(demo1.width());
    }else{
        demo.scrollLeft(demo.scrollLeft()-1);
    }
}

向上无缝滚动的HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向上滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr id="demo1">
      <td valign="top" bgcolor="ffffff">
      
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr id="demo2">
    </tr>
  </table>
</div>
<script type="text/javascript">
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){
    if(demo.scrollTop()>=demo1.height())
        demo.scrollTop(0);
    else{
        demo.scrollTop(demo.scrollTop()+1);
    }
}
var MyMar=setInterval(Marquee,speed)
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollTop());
}
function fun2(){
    alert(demo1.height());
}
</script>
<input type="button"  value="显示demo.scrollTop()" οnclick="fun1();"/>
<input type="button"  value="显示demo1.height())" οnclick="fun2();"/>
</body>
</html>

向下无缝滚动的HTML代码同上，只是js脚本中的Marquee函数不同，如下：

function Marquee(){
    if(demo.scrollTop()==0)
        demo.scrollTop(demo1.height());
    else{
        demo.scrollTop(demo.scrollTop()-1);
    }
}

转载于:https://www.cnblogs.com/wei-91/p/6079943.html

weixin_30448603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery的无缝滚动

图片无缝向左滚动的代码如下：<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml">...
复制链接

扫一扫