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的闭包
Dec 31 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
Aug 20 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
ant-design-vue中的select选择器,对输入值的进行筛选操作
Oct 24 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
PHP全概率运算函数(优化版) Webgame开发必备
2011/07/04 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php函数与传递参数实例分析
2014/11/15 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
js不是基础的基础
2006/12/24 Javascript
JS 判断代码全收集
2009/04/28 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
2011/07/10 Javascript
js去除输入框中所有的空格和禁止输入空格的方法
2014/06/09 Javascript
Javascript编写2048小游戏
2015/07/07 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
JavaScript基础知识之方法汇总结
2016/01/24 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
AngularJS 工作原理详解
2016/08/18 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
angular+bootstrap的双向数据绑定实例
2017/03/03 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
js获取html页面代码中图片地址的实现代码
2018/03/05 Javascript
vue主动刷新页面及列表数据删除后的刷新实例
2018/09/16 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
利用Python将时间或时间间隔转为ISO 8601格式方法示例
2017/09/05 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
使用Python给头像戴上圣诞帽的图像操作过程解析
2019/09/20 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
英国性感内衣和睡衣品牌:Bluebella
2018/01/26 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
工程力学专业毕业生求职信
2013/10/06 职场文书
2014年药店店长工作总结
2014/11/17 职场文书
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫