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 相关文章推荐
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 Javascript
js select常用操作控制代码
Mar 16 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
基于jQuery的input输入框下拉提示层(自动邮箱后缀名)
Jun 14 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
使用JavaScript破解web
Sep 28 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
js利用iframe实现选项卡效果
Aug 09 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
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 #Javascript
You might like
Jquery中LigerUi的弹出编辑框(实现方法)
2013/07/09 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
vue.js将unix时间戳转换为自定义时间格式
2017/01/03 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
Vue.js用法详解
2017/11/13 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
vue实现图书管理系统
2020/12/29 Vue.js
新手该如何学python怎么学好python?
2008/10/07 Python
python装饰器与递归算法详解
2016/02/18 Python
利用Python生成文件md5校验值函数的方法
2017/01/10 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python实现简单的文本相似度分析操作详解
2018/06/16 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
django session完成状态保持的方法
2018/11/27 Python
django-初始配置(纯手写)详解
2019/07/30 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
详解HTML5 LocalStorage 本地存储
2016/12/23 HTML / CSS
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
美国领先的医疗警报服务:Philips Lifeline
2018/03/12 全球购物
一些Solaris面试题
2013/03/22 面试题
计算机专业个人求职自荐信
2013/09/21 职场文书
网络管理专业求职信
2014/03/15 职场文书
考试作弊检讨书
2014/10/21 职场文书
爱心募捐通知范文
2015/04/27 职场文书
绿色环保倡议书
2015/04/28 职场文书
情人节单身感言
2015/08/03 职场文书
2016党校学习心得体会
2016/01/07 职场文书
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技