现在就有两组图片了澳门金莎网址

思路:

现在就有两组图片了澳门金莎网址。一组图片 控制它的滚动条进行滚动
且此时对这组图片进行复制并添加进原图片组中,现在就有两组图片了。你可以想象一下,现在滚动条继续滚动,原来那组图片最后一张图片已经滚至顶端且消失,复制的那组图片的第一张跟在原图最后一张图片后出现,此时你就能感觉到无缝滚动了。

复制代码 代码如下:

<现在就有两组图片了澳门金莎网址。!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
    <meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
    <title>JS图片向左滚动</title>
    <style type=”text/css”>
    img{
     border: none;
    }
    </style>
</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”>
      <!–
特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题!
–>
          <table border=”0″ cellspacing=”0″ cellpadding=”0″>
          <tr align=”center”>
            <td><a href=”#” target=”_blank”><img
src=”images/1.jpg” width=”150″ height=”100″></a></td>
            <td><a href=”#现在就有两组图片了澳门金莎网址。” target=”_blank”><img
src=”images/2.jpg” width=”150″ height=”100″></a></td>
            <td><a href=”#” target=”_blank”><img
src=”images/3.jpg” width=”150″ height=”100″></a></td>
            <td><a href=”#” target=”_blank”><img
src=”images/4.jpg” width=”150″ height=”100″></a></td>
            <td><a href=”#” target=”_blank”><img
src=”images/5.jpg” width=”150″ height=”100″></a></td>
          </tr>
        </table>
      </td>

      <td id=”demo2″ valign=”top”>

   </td>

    </tr>
  </table>
</div>

<div id=”msg”></div>
<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

  //0:定速度
  var speed = 30;
  //1:获取元素  demo demo1 demo2
  var demo = $(“#demo”);
  var demo1 = $(“#demo1”);
  var demo2 = $(“#demo2”);
  //2:复制 demo1–>demo2
  var cont = $(“#demo1”).html();
  $(“#demo2”).html(cont);

 
  //3:创建方法定时执行
  function hello(){
     var left = $(“#demo”).scrollLeft();
  if(left >= $(“#demo1”).width()){
   left = 0;
  }else{
   left++;
  }
  $(“#demo”).scrollLeft(left);

 setTimeout(“hello()”,speed);
  }
  hello();
  //   移动demo.scrollLeft();

</script>
</body>
</html>

您可能感兴趣的文章:

  • JavaScript实现简单精致的图片左右无缝滚动效果
  • 原生javascript实现图片无缝滚动效果
  • js实现图片无缝滚动特效
  • js实现图片无缝滚动
  • js代码实现无缝滚动(文字和图片)
  • Javascript
    实现图片无缝滚动
  • 使用Javascript简单实现图片无缝滚动
  • JS图片无缝滚动(简单利于使用)
  • jcarousellite.js
    基于Jquery的图片无缝滚动插件
  • JS简单封装的图片无缝滚动效果示例【测试可用】

相关文章