JavaScript轮播停留效果的实现思路


Posted in Javascript onMay 24, 2018

一、思路

1.轮播停留与无线滚动十分类似,都是利用属性及变量控制移动实现轮播;

2.不同的是轮播停留需要添加过渡属性搭配定时器即可实现轮播停留效果;

二、步骤

1.写基本结构样式

需在末尾多添加一张与第一张相同的图片,消除切换时的抖动;

2.添加轮播停留事件 有了之前的基础,直接添加索引圈默认事件到轮播停留事件内;

注意:当轮播到最后一张时,需要消除掉过渡,这里使用setTimeout定时器,卡最后一张图片轮播完不延时,直接跳转到第一张,由于第一张和最后一张一样,所以会形成视觉盲区,看起来是连续轮播效果;

//轮播停留方法
function move() {
 box.className = "box anmint";
 circle[count].style.backgroundColor = "";
 count++;
 box.style.marginLeft = (-800 * count) + "px";
 //最后一张走完之后,执行一次定时器不循环,卡过渡时间,消除切换
 setTimeout(function () {
   if (count >= 6) {
    count = 0;
    box.className = "box";
    //marginLeft=0之前去除过渡属性
    box.style.marginLeft = "0px";
   }
  circle[count].style.backgroundColor = "red";
 }, 500);
}

3.添加进入索引圈事件

这和淡入淡出进入索引圈事件基本一致,不同的是这里不用调用轮播停留事件,直接利用当前index来索引使图片跟随变换;注意最后要标记count=this.index值,令再次执行默认行为时是紧跟着当前显示图片向后执行默认行为;

//进入索引圈事件
for(var j=0;j<circle.length;j++){
 circle[j].index=j;
 circle[j].onmouseenter=function(){
  for(var k=0;k<circle.length;k++){
   circle[k].style.backgroundColor="";
  }
  this.style.backgroundColor="red";
  //图片跟随移动
  box.className="box anmint";
  box.style.marginLeft=(-800*this.index)+"px";
  count=this.index;
 }
}

4.完善鼠标进入离开代码

效果图:

JavaScript轮播停留效果的实现思路

完整代码:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>JS轮播停留效果</title> 
 <style> 
  *{margin: 0;padding: 0;} 
  html,body{width: 100%;height: 100%;} 
  .block{ 
   width: 800px; 
   height: 400px; 
   margin: 80px auto; 
   position: relative; 
   border: 1px solid red; 
   overflow: hidden; 
  } 
  .box{ 
   width: 5600px; 
   height: 400px; 
   float: left; 
  } 
  .anmint{ 
   transition: all 0.5s ease-in-out; 
  } 
  img{ 
   width: 800px; 
   height: 400px; 
   float: left; 
  } 
  .cir{ 
   width: 150px; 
   height: 20px; 
   z-index: 7; 
   position: absolute; 
   bottom: 10px; 
   left: 320px; 
  } 
  .circle{ 
   width: 10px; 
   height: 10px; 
   border: 2px solid grey; 
   border-radius: 50%; 
   float: left; 
   margin: 0 5px; 
  } 
 </style> 
 <script> 
  window.onload=function(){ 
   var box=document.getElementsByClassName("box")[0]; 
   var count=0; 
   //索引圈事件 
   var circle=document.getElementsByClassName("circle"); 
   circle[0].style.backgroundColor="red"; 
   var time=setInterval(function(){ 
    move(); 
   },2000); 
   //鼠标进入事件 
   var block=document.getElementsByClassName("block")[0]; 
   block.onmouseenter=function(){ 
    clearInterval(time); 
   }; 
   //鼠标离开事件 
   block.onmouseleave=function(){ 
    time=setInterval(function(){ 
     move(); 
    },2000); 
   }; 
   //进入索引圈事件 
   for(var j=0;j<circle.length;j++){ 
    circle[j].index=j; 
    circle[j].onmouseenter=function(){ 
     for(var k=0;k<circle.length;k++){ 
      circle[k].style.backgroundColor=""; 
     } 
     this.style.backgroundColor="red"; 
     //图片跟随移动 
     box.className="box anmint"; 
     box.style.marginLeft=(-800*this.index)+"px"; 
     count=this.index; 
    } 
   } 
   //轮播停留方法 
   function move() { 
    box.className = "box anmint"; 
    circle[count].style.backgroundColor = ""; 
    count++; 
    box.style.marginLeft = (-800 * count) + "px"; 
    //最后一张走完之后,执行一次定时器不循环,卡过渡时间,消除切换 
    setTimeout(function () { 
      if (count >= 6) { 
       count = 0; 
       box.className = "box"; 
       //marginLeft=0之前去除过渡属性 
       box.style.marginLeft = "0px"; 
      } 
     circle[count].style.backgroundColor = "red"; 
    }, 500); 
   } 
  } 
 </script> 
</head> 
<body> 
<div class="block"> 
 <div class="box"> 
   <img class="imgg" src="./image/box1.jpg"> 
   <img class="imgg" src="./image/box2.jpg"> 
   <img class="imgg" src="./image/box3.jpg"> 
   <img class="imgg" src="./image/box4.jpg"> 
   <img class="imgg" src="./image/box5.jpg"> 
   <img class="imgg" src="./image/box6.jpg"> 
   <img class="imgg" src="./image/box1.jpg"> 
 </div> 
 <div class="cir"> 
  <div class="circle"></div> 
  <div class="circle"></div> 
  <div class="circle"></div> 
  <div class="circle"></div> 
  <div class="circle"></div> 
  <div class="circle"></div> 
 </div> 
</div> 
</body> 
</html>

总结

以上所述是小编给大家介绍的JavaScript轮播停留效果的思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
Jan 23 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
微信小程序项目实践之九宫格实现及item跳转功能
Jul 19 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
Nov 28 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
JS基础之逻辑结构与循环操作示例
Jan 19 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue2单元测试环境搭建
May 24 #Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 #Javascript
vue组件name的作用小结
May 23 #Javascript
linux 后台运行node服务指令方法
May 23 #Javascript
node.js部署之启动后台运行forever的方法
May 23 #Javascript
jquery引入外部CDN 加载失败则引入本地jq库
May 23 #jQuery
jQuery实现form表单序列化转换为json对象功能示例
May 23 #jQuery
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
供参考的 php 学习提高路线分享
2011/10/23 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
PHP使用fopen与file_get_contents读取文件实例分享
2016/03/04 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
PHP实现用户异地登录提醒功能的方法【基于thinkPHP框架】
2018/03/15 PHP
PHP设计模式之PHP迭代器模式讲解
2019/03/22 PHP
Alliance vs Liquid BO3 第二场2.13
2021/03/10 DOTA
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
javascript alert乱码的解决方法
2013/11/05 Javascript
浅谈JavaScript Math和Number对象
2015/01/26 Javascript
ECMAScript6快速入手攻略
2016/07/18 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
详解AngularJS用Interceptors来统一处理HTTP请求和响应
2017/06/08 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
Vue动态生成el-checkbox点击无法赋值的解决方法
2019/02/21 Javascript
vue ssr服务端渲染(小白解惑)
2019/11/10 Javascript
[01:02:09]Liquid vs TNC 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21
2020/07/19 DOTA
python中的计时器timeit的使用方法
2017/10/20 Python
在Python中增加和插入元素的示例
2018/11/01 Python
Python unittest单元测试openpyxl实现过程解析
2020/05/27 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
英国时尚家具、家居饰品及礼品商店:Graham & Green
2016/09/15 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
求职信内容考虑哪几点
2013/10/05 职场文书
预备党员思想汇报
2014/01/08 职场文书
中学生校园广播稿
2014/01/16 职场文书
2014年最新学习全国两会精神心得
2014/03/17 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年体育部工作总结
2014/11/13 职场文书
原料仓管员岗位职责
2015/04/01 职场文书
党员公开承诺书(2016最新版)
2016/03/24 职场文书