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 相关文章推荐
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
js实现滑动触屏事件监听的方法
May 05 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
Node.js操作mysql数据库增删改查
Mar 30 Javascript
jQuery视差滚动效果网页实现方法经验总结
Sep 29 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
微信小程序 picker-view 组件详解及简单实例
Jan 10 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
原生js获取left值和top值的三种方法
Aug 02 Javascript
for循环 + setTimeout 结合一些示例(前端面试题)
Aug 30 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
Feb 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
解析PayPal支付接口的PHP开发方式
2010/11/28 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
php基于Fleaphp框架实现cvs数据导入MySQL的方法
2016/02/23 PHP
使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能示例
2017/09/15 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
JS实现商品筛选功能
2020/08/19 Javascript
基于JavaScript实现多级菜单效果
2017/07/25 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
element-ui 中的table的列隐藏问题解决
2018/08/24 Javascript
vue 项目接口管理的实现
2019/01/17 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python使用itchat模块实现群聊转发,自动回复功能示例
2019/08/26 Python
Python中xml和dict格式转换的示例代码
2019/11/07 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
python查询MySQL将数据写入Excel
2020/10/29 Python
Python之Sklearn使用入门教程
2021/02/19 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
DC Shoes荷兰官方网站:美国极限运动品牌
2019/10/22 全球购物
VLAN和VPN有什么区别?分别实现在OSI的第几层?
2014/12/23 面试题
2014年计生标语
2014/06/23 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
工厂见习报告范文
2014/10/31 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python