可自定义速度的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中Array 对象相关的几个方法
Dec 22 Javascript
Javascript判断对象是否相等实现代码
Mar 18 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
jquery中append()与appendto()用法分析
Nov 14 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
Mar 04 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
Dec 16 Javascript
js 获取今天以及过去日期
Apr 11 Javascript
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
详解Vue的mixin策略
Nov 19 Vue.js
文本框文本自动补全效果示例分享
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学习 函数 课件
2008/06/15 PHP
一个PHP的String类代码
2010/04/20 PHP
php生成mysql的数据字典
2016/07/07 PHP
php微信浏览器分享设置以及回调详解
2016/08/01 PHP
php获取POST数据的三种方法实例详解
2016/12/20 PHP
js 获取Listbox选择的值的代码
2010/04/15 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
详解JavaScript中常用的函数类型
2015/11/18 Javascript
原生js和jquery分别实现横向导航菜单效果
2016/05/13 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
浅谈Angular 的变化检测的方法
2018/03/01 Javascript
jQuery中常用动画效果函数知识点整理
2018/08/19 jQuery
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python好玩的项目—色情图片识别代码分享
2017/11/07 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
Python时间序列处理之ARIMA模型的使用讲解
2019/04/02 Python
Python音频操作工具PyAudio上手教程详解
2019/06/26 Python
Python字符串、列表、元组、字典、集合的补充实例详解
2019/12/20 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
We Fashion荷兰:一家国际时装公司
2018/04/18 全球购物
婴儿地球:Baby Earth
2018/12/25 全球购物
中医专业应届生求职信
2013/11/17 职场文书
社团招新策划书
2014/02/04 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
公司周年庆典策划方案
2014/05/17 职场文书
企业环保标语
2014/06/10 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS