标准的js无缝滚动效果


Posted in Javascript onAugust 30, 2016

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

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动</title>
 <style>
 #warp{
  width: 1200px;
  height: 300px;
  overflow: hidden;
  margin:100px auto 0;
 }
 #warp #con{
  width: 4000px;
  height: 300px;
  overflow: hidden;
 }
 #warp #con #box1{
   float: left;
   overflow: hidden;
 }
 #warp #con #box2{
   float: left;
   overflow: hidden;
 }
 #warp img{
  float: left;
  width: 200px;
  height: 300px;
 }
 </style>
</head>
<body>
 <div id="warp">
  <div id="con">
   <div id="box1">
    <img src="images/meinv1.jpg" alt="">
    <img src="images/meinv2.jpg" alt="">
    <img src="images/meinv3.jpg" alt="">
    <img src="images/meinv4.jpg" alt="">
    <img src="images/meinv5.jpg" alt="">
    <img src="images/meinv6.jpg" alt="">
   </div>
   <div id="box2"></div>
  </div>
 </div>
 <script>
  var warp=document.getElementById('warp');
  var con=document.getElementById('con');
  var box1=document.getElementById('box1');
  var box2=document.getElementById('box2');
  // box2.innerHTML=box1.innerHTML;
  var timer1=null,x=0;
  function scroll(){//滚动函数
  box2.innerHTML=box1.innerHTML;
  timer1=setInterval(function(){
   x++;
   if (x>=box1.clientWidth) {
    x=0;
    warp.scrollLeft=x;
   }
   warp.scrollLeft=x;
  },10)
  }
  scroll();
  warp.onmouseenter=function(){
   clearInterval(timer1);
  }
  warp.onmouseleave=function(){
   scroll();
  }
 </script>
</body>
</html>

这种效果的主要思想是图片内容部分的宽度要远远大于要展示区域的宽度,使其出现滚动条。复制上一组图片的内容使其在效果上实现无缝滚动,具体的请大家参考代码。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 表格排序和表头浮动效果(扩展SortTable)
Apr 07 Javascript
JavaScript Chart 插件整理
Jun 18 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
javascript实用小函数使用介绍
Nov 11 Javascript
在javascript中执行任意html代码的方法示例解读
Dec 25 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
在线引用最新jquery文件的实现方法
Aug 26 Javascript
JQuery遍历元素的后代和同胞实现方法
Sep 18 Javascript
jQuery实现的简单在线计算器功能
May 11 jQuery
JS实现元素上下左右移动效果
Oct 18 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
如何基于viewport vm适配移动端页面
Nov 13 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 #Javascript
js制作网站首页图片轮播特效代码
Aug 30 #Javascript
js实现简单的碰壁反弹效果
Aug 30 #Javascript
js控住DOM实现发布微博效果
Aug 30 #Javascript
AngularJS动态生成div的ID源码解析
Aug 29 #Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 #Javascript
快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)
Aug 29 #Javascript
You might like
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
jQuery新闻滚动插件 jquery.roller.js
2011/06/27 Javascript
JS.GetAllChild(element,deep,condition)使用介绍
2013/09/21 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
使用基于Node.js的构建工具Grunt来发布ASP.NET MVC项目
2016/02/15 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
jQuery实现鼠标跟随效果
2017/02/20 Javascript
Vue异步加载about组件
2017/10/31 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
详解如何在vue项目中使用lodop打印插件
2018/09/27 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
2019/12/10 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python下的twisted框架入门指引
2015/04/15 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
pow在python中的含义及用法
2019/07/11 Python
使用Tensorflow实现可视化中间层和卷积层
2020/01/24 Python
django的autoreload机制实现
2020/06/03 Python
深入了解Python enumerate和zip
2020/07/16 Python
python3让print输出不换行的方法
2020/08/24 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
eBay奥地利站:eBay.at
2019/07/24 全球购物
小学生综合素质评语
2014/04/23 职场文书
2014年机关党建工作总结
2014/11/11 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
高三毕业感言
2015/07/30 职场文书
2016大学生求职自荐信范文
2016/01/28 职场文书
Python3中最常用的5种线程锁实例总结
2021/07/07 Python