可自定义速度的js图片无缝滚动示例分享


Posted in Javascript onJanuary 20, 2014

思路:

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

<!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>
</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 相关文章推荐
20款超赞的jQuery插件 Web开发人员必备
Feb 26 Javascript
javascript动态加载二
Aug 22 Javascript
自己封装的javascript事件队列函数版
Jun 12 Javascript
BootStrapValidator初使用教程详解
Feb 10 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
Express的HTTP重定向到HTTPS的方法
Jun 06 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
JS实现可控制的进度条
Mar 25 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
Sep 04 Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 Javascript
微信小程序自定义底部弹出框动画
Nov 18 Javascript
文本框文本自动补全效果示例分享
Jan 19 #Javascript
不使用jquery实现js打字效果示例分享
Jan 19 #Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 #Javascript
js取float型小数点后两位数的方法
Jan 18 #Javascript
js数组循环遍历数组内所有元素的方法
Jan 18 #Javascript
js使用eval解析json实例与注意事项分享
Jan 18 #Javascript
收集json解析的四种方法分享
Jan 17 #Javascript
You might like
php将mysql数据库整库导出生成sql文件的具体实现
2014/01/08 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
简单谈谈 php 文件锁
2017/02/19 PHP
简单三步,搞掂内存泄漏
2007/03/10 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
原生javascript兼容性测试实例
2013/07/01 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
jquery选择器之基本过滤选择器详解
2014/01/27 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
vue中动态添加class类名的方法
2018/09/05 Javascript
JavaScript实现文件下载并重命名代码实例
2019/12/12 Javascript
Vue中keep-alive组件作用详解
2020/02/04 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
原生JS实现九宫格抽奖
2020/09/13 Javascript
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
详解Python yaml模块
2020/09/23 Python
详解Python中第三方库Faker
2020/09/25 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
C#如何判断当前用户是否输入某个域
2015/12/07 面试题
大学系主任推荐信范文
2013/12/24 职场文书
优秀老师事迹材料
2014/02/05 职场文书
实习协议书范本
2014/04/22 职场文书
五好关工委申报材料
2014/05/31 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
优秀教师自我评价范文
2014/09/27 职场文书
《西门豹》教学反思
2016/02/23 职场文书
MySQL空间数据存储及函数
2021/09/25 MySQL
CentOS MySql8 远程连接实战
2022/04/19 MySQL