标准的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 相关文章推荐
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
Javascript基础 函数“重载” 详细介绍
Oct 25 Javascript
js的touch事件的实际引用
Oct 13 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
Jan 10 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
js获取ip和地区
Mar 10 Javascript
Vue导出页面为PDF格式的实现思路
Jul 31 Javascript
d3.js实现图形缩放平移
Dec 19 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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 set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
php显示页码分页类的封装
2017/06/08 PHP
Js 获取HTML DOM节点元素的方法小结
2009/04/24 Javascript
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
js控制div及网页相关属性的代码
2009/12/19 Javascript
innerText和textContent对比及使用介绍
2013/02/27 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
限制上传文件大小和格式的jQuery插件实例
2015/01/24 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
JS+CSS实现简易的滑动门效果代码
2015/09/24 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
javascript/jquery实现点击触发事件的方法分析
2019/11/11 jQuery
微信小程序实现电子签名功能
2020/07/29 Javascript
Vue封装全局过滤器Filters的步骤
2020/09/16 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
Python中的random()方法的使用介绍
2015/05/15 Python
python实战教程之自动扫雷
2018/07/13 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
详解python配置虚拟环境
2019/04/08 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python修改FTP服务器上的文件名
2019/09/11 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
LivingSocial英国:英国本地优惠
2019/02/22 全球购物
POS解决方案:MUNBYN(热敏打印机、条形码扫描仪)
2020/06/09 全球购物
学生会竞选演讲稿
2014/04/24 职场文书
大学感恩节活动策划方案
2014/10/11 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书
详解Python如何批量采集京东商品数据流程
2022/01/22 Python