标准的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面向对象编程
Mar 02 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
jquery动画1.加载指示器
Aug 24 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
详解Vue底部导航栏组件
May 02 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脚本的10个技巧(6)
2006/10/09 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
Javascript 代码也可以变得优美的实现方法
2009/06/22 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
2013/08/28 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
2017/01/19 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue最简单的前后端交互示例详解
2018/10/11 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
python中enumerate的用法实例解析
2014/08/18 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
python3+PyQt5实现拖放功能
2018/04/24 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
Linux系统下升级pip的完整步骤
2021/01/31 Python
巴西最大的体育用品商城:Netshoes巴西
2016/11/29 全球购物
夏洛特和乔治婴儿和儿童时装精品店:Charlotte and George
2018/06/06 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
Spongelle官网:美国的创意护肤洗护品牌
2019/05/15 全球购物
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
安全生产检讨书
2014/01/21 职场文书
委托书范本
2014/04/02 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
颐和园的导游词
2015/01/30 职场文书
八年级物理教学反思
2016/02/19 职场文书
高中化学教学反思
2016/02/22 职场文书
Mysql中where与on的区别及何时使用详析
2021/08/04 MySQL
从QQtabBar看css命名规范BEM的详细介绍
2021/08/07 HTML / CSS
Vue监视数据的原理详解
2022/02/24 Vue.js