可自定义速度的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 相关文章推荐
js 用CreateElement动态创建标签示例
Nov 20 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
全面解析Bootstrap表单使用方法(表单样式)
Nov 24 Javascript
JavaScript Split()方法
Dec 18 Javascript
jQuery数据类型小结(14个)
Jan 08 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
详解vue-router的Import异步加载模块问题的解决方案
May 13 Javascript
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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的文章管理系统(一)
2006/10/09 PHP
PHP编实现程动态图像的创建代码
2008/09/28 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
PHP实现简单实用的分页类代码
2016/04/08 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
PHP实现生成推广海报的方法详解
2018/03/14 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
ExtJS4中使用mixins实现多继承示例
2013/12/03 Javascript
项目中常用的JS方法整理
2015/01/30 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
2016/04/08 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
JointJS流程图的绘制方法
2018/12/03 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
在Python中使用mongoengine操作MongoDB教程
2015/04/24 Python
Python对文件操作知识汇总
2016/05/15 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
英国曼彻斯特宠物用品品牌:Bunty Pet Products
2019/07/27 全球购物
Delphi工程师笔试题
2013/09/21 面试题
毕业生自我鉴定
2013/11/05 职场文书
2014年工作总结及2015工作计划
2014/12/12 职场文书
初中学生操行评语
2014/12/26 职场文书
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL