您的位置：首页 > Web前端 > JQuery

jQuery——图片无缝滚动效果

2012-11-17 22:06 267 查看
原文章：　http://www.cnblogs.com/xiachufeng/archive/2010/07/19/1780926.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
    img{border: none;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    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);
    } )
});
</script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=0 cellspacing=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="#ffffff"  >
      <!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img alt="1" src="01.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img alt="2" src="02.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img alt="3" src="03.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img alt="4" src="04.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img alt="5" src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
      <td id="demo2" valign="top"></td>
    </tr>
  </table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航