js实现按钮控制带有停顿效果的图片滚动


Posted in Javascript onAugust 30, 2016

本文实例使用js实现带有停顿效果的图片滚动,受按钮控制,供大家参考,具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>无缝滚动2</title>
 <style>
 #warp{
 width: 1250px;
 height: 300px;
 overflow: hidden;
 margin:100px auto 0;
 overflow-x: auto;
 }
 #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;
 margin-right: 10px;
 width: 200px;
 height: 300px;
 }
 .btn{
 text-align: center;
 margin-top: 10px;
 }
 .btn button{
 font-size: 16px;
 }
 </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>
 <div class="btn">
 <button id="scrollL"><<左滚</button>
 <button id="scrollR">右滚>></button>
 </div>
 <script>
 var warp=document.getElementById('warp');
 var con=document.getElementById('con');
 var box1=document.getElementById('box1');
 var box2=document.getElementById('box2');
 var img=box1.getElementsByTagName('img')[0];
 var scrollL=document.getElementById('scrollL');
 var scrollR=document.getElementById('scrollR');
 var timer1=null,timer2=null,flage=1;
 box2.innerHTML=box1.innerHTML;
 max=box1.clientWidth;
 imgmax=img.clientWidth+10;
 function scrollLeft(){
  flage=1;
  clearInterval(timer1);
  timer1=setInterval(function(){
  warp.scrollLeft++;
  if (warp.scrollLeft>=max) {
   warp.scrollLeft=0;
  }
  if(warp.scrollLeft%imgmax==0){
   clearInterval(timer1);
   clearTimeout(timer2);
   timer2=setTimeout(function(){
   timer1=setInterval(scrollLeft,5)
   },2000)
  }
  },5)
 }
 function scrollRight(){
  flage=0;
  clearInterval(timer1);
  timer1=setInterval(function(){
  warp.scrollLeft--;
  if (warp.scrollLeft<=0) {
   warp.scrollLeft=max;
  }
  if(warp.scrollLeft%imgmax==0){
   clearInterval(timer1);
   clearTimeout(timer2);
   timer2=setTimeout(function(){
   timer1=setInterval(scrollRight,5)
   },2000)
  }
  },5)
 }
  scrollLeft();
 scrollL.onclick=function(){
  // clearInterval(timer1);
  // clearTimeout(timer2);
  scrollLeft();
 }
 scrollR.onclick=function(){
  // clearInterval(timer1);
  // clearTimeout(timer2);
  scrollRight();
 }
 warp.onmouseenter=function(){
  clearInterval(timer1);
  clearTimeout(timer2);
 }
 warp.onmouseleave=function(){
  clearInterval(timer1);
  clearTimeout(timer2);
  console.log(flage);
  if (flage) {scrollLeft();}
  else{scrollRight();} 
 }
 </script>
</body>
</html>

这种效果的具体效果是鼠标移上去滚动停止,移出滚动,滚动时是一张一张图片的滚动,即滚动一张之后停2s开始滚动下一张,具体内容请大家参考代码。

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

Javascript 相关文章推荐
JsRender实用入门教程
Oct 31 Javascript
JavaScript实现点击文字切换登录窗口的方法
May 11 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
Jan 21 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
Javascript实现的StopWatch功能示例
Jun 13 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
vue实现移动端div拖动效果
Mar 03 Vue.js
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
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
You might like
php实现三级级联下拉框
2016/04/17 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
PHP生成word文档的三种实现方式
2016/11/14 PHP
PHP进制转换实例分析(2,8,16,36,64进制至10进制相互转换)
2017/02/04 PHP
PHP实现单例模式建立数据库连接的方法分析
2020/02/11 PHP
使用按钮控制以何种方式打开新窗口的属性介绍
2012/12/17 Javascript
JQuery对id中含有特殊字符的转义处理示例
2013/09/06 Javascript
javascript实现炫酷的拖动分页
2015/05/11 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js实现Select列表各项上移和下移的方法
2015/08/14 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
一些实用性较高的js方法
2016/04/19 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
微信小程序 本地数据读取实例
2017/04/27 Javascript
JavaScript-定时器0~9抽奖系统详解(代码)
2017/08/16 Javascript
在Python中使用判断语句和循环的教程
2015/04/25 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
Python OpenCV实现视频分帧
2019/06/01 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
python如何调用java类
2020/07/05 Python
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
2014年创卫实施方案
2014/02/18 职场文书
平面设计专业求职信
2014/08/09 职场文书
乡镇挂职心得体会
2014/09/04 职场文书
生活小常识广播稿
2014/09/16 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
先进班集体事迹材料
2014/12/25 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
Python OpenCV之常用滤波器使用详解
2022/04/07 Python