js实现无缝循环滚动


Posted in Javascript onJune 23, 2020

本文实例为大家分享了js无缝循环滚动实现代码,供大家参考,具体内容如下

1、图片格式:260*400.
2、使用循环定时器轻松实现

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title>
</head>
<style type="text/css">
 .row{
 width: 1298px;
 height: 400px;
 border: 1px solid;
 box-shadow:2px 2px 2px #000;
 overflow: hidden;
 }
 .box{
 position: relative;
 }
 .box1,.box2{
 width: 1298px;
 position: absolute;
 }
 .box2{
 left:1298px;
 }
 img{
 float: left;
 }
</style>
<body>
 <div class="row">
 <div class="box" id="box">
  <div class="box1" id="box1">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  </div>
  <div class="box2" id="box2">
  <img src="images/1.jpg">
  <img src="images/2.jpg">
  <img src="images/3.jpg">
  <img src="images/4.jpg">
  <img src="images/5.jpg">
  </div>
 </div>
 </div>
</body>
<script type="text/javascript">
 window.onload = function(){
 var _box1 = document.getElementById("box1");
 var _box2 = document.getElementById("box2");
 var x = 0;
 var fun = function(){
  _box1.style.left = x + 'px';
  _box2.style.left = (x +1298) + 'px';
  x--;
  if((x +1298) == 0){
  x = 0;
  }
 }
 setInterval(fun,1);
 }
</script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
js猜数字小游戏的简单实现代码
Jul 02 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
JS中捕获console.log()输出的方法
Apr 16 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
Angularjs---项目搭建图文教程
Jul 08 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
Jul 23 Javascript
JavaScript实现学生在线做题计时器功能
Dec 05 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
Sep 22 Javascript
jquery实现网页定位导航
Aug 23 #Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
Aug 23 #Javascript
Javascript将JSON日期格式化
Aug 23 #Javascript
Jquery组件easyUi实现选项卡切换示例
Aug 23 #Javascript
Jquery调用iframe父页面中的元素及方法
Aug 23 #Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
You might like
php编程实现获取excel文档内容的代码实例
2011/06/28 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php实现修改新闻时删除图片的方法
2015/05/12 PHP
学习ExtJS fit布局使用说明
2009/10/08 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
2011/10/09 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery动态改变多行文本框高度的方法
2016/09/07 Javascript
JavaScript九九乘法口诀表的简单实现
2016/10/04 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
浅谈对于react-thunk中间件的简单理解
2019/05/01 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
自定义javascript验证框架示例【附源码下载】
2019/05/31 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
python多线程扫描端口示例
2014/01/16 Python
在Django中创建第一个静态视图
2015/07/15 Python
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python针对excel的操作技巧
2018/03/13 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
python try 异常处理(史上最全)
2019/03/07 Python
详解python运行三种方式
2019/05/13 Python
库房保管员岗位职责
2014/04/07 职场文书
商业融资计划书
2014/04/29 职场文书
上课不认真检讨书
2014/09/17 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
回复函格式及范文
2015/07/14 职场文书
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS