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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
基于jquery的合并table相同单元格的插件(精简版)
Apr 05 Javascript
jquery offset函数应用实例
Nov 14 Javascript
详解JavaScript正则表达式中的global属性的使用
Jun 16 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
基于jquery实现图片放大功能
May 07 Javascript
jquery html5 视频播放控制代码
Nov 06 Javascript
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
vue中如何让子组件修改父组件数据
Jun 14 Javascript
node实现分片下载的示例代码
Oct 17 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 Javascript
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
解析thinkphp中的M()与D()方法的区别
2013/06/22 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
THINKPHP支持YAML配置文件的设置方法
2015/03/17 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
PHP商品秒杀问题解决方案实例详解【mysql与redis】
2019/07/22 PHP
JS option location 页面跳转实现代码
2008/12/27 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
js登录弹出层特效
2014/03/07 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript实现添加、查找、删除元素
2015/07/02 Javascript
js实现简单计算器
2015/11/22 Javascript
Javascript之面向对象--封装
2016/12/02 Javascript
基于jQuery实现瀑布流页面
2017/04/11 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
2017/07/17 jQuery
React-Native中props具体使用详解
2017/09/04 Javascript
微信小程序日期时间选择器使用方法
2018/02/01 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
微信小程序前端自定义分享的实现方法
2019/06/13 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
[02:41]2015国际邀请赛中国区预选赛观战指南
2015/05/20 DOTA
Python3.7实现中控考勤机自动连接
2018/08/28 Python
pandas将多个dataframe以多个sheet的形式保存到一个excel文件中
2019/10/10 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python字符串及文本模式方法详解
2020/09/10 Python
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
科颜氏印度官网:Kiehl’s印度
2021/02/20 全球购物
中专生自我鉴定范文
2013/12/19 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
公益活动邀请函
2014/02/05 职场文书
人身损害赔偿协议书范本
2014/09/27 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js
python中的sys模块和os模块
2022/03/20 Python