可自定义速度的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 相关文章推荐
JavaScript的变量作用域深入理解
Oct 25 Javascript
jquery 跨域访问问题解决方法(笔记)
Jun 08 Javascript
基于jQuery的投票系统显示结果插件
Aug 12 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
原生js实现tab选项卡切换
Mar 23 Javascript
js浏览器html5表单验证
Oct 17 Javascript
jquery自定义显示消息数量
Dec 19 jQuery
基于 Immutable.js 实现撤销重做功能的实例代码
Mar 01 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
Aug 19 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 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变量引用的面试题
2010/08/08 PHP
使用ThinkPHP+Uploadify实现图片上传功能
2014/06/26 PHP
PHP实现自动登入google play下载app report的方法
2014/09/23 PHP
PHP实现抓取HTTPS内容
2014/12/01 PHP
php绘制一个矩形的方法
2015/01/24 PHP
php常用图片处理类
2016/03/16 PHP
php 使用 __call实现重载功能示例
2019/11/18 PHP
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
javascript Array对象基础知识小结
2010/11/16 Javascript
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
vue-star评星组件开发实例
2018/03/01 Javascript
vue-cli脚手架引入图片的几种方法总结
2018/03/13 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
[02:01]大师之路——DOTA2完美大师赛11月论剑上海
2017/11/06 DOTA
[48:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第二场 1月29日
2021/03/11 DOTA
python类的方法属性与方法属性的动态绑定代码详解
2017/12/27 Python
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python pandas 如何替换某列的一个值
2018/06/09 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
python datetime处理时间小结
2020/04/16 Python
如何设置PyCharm中的Python代码模版(推荐)
2020/11/20 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
消防安全汇报材料
2014/02/08 职场文书
十一酒店活动方案
2014/02/20 职场文书
请假条的格式
2014/04/11 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
聘任书范文大全
2015/09/21 职场文书
反邪教学习心得体会
2016/01/15 职场文书
Go 自定义package包设置与导入操作
2021/05/06 Golang