原生js轮播特效


Posted in Javascript onMay 18, 2017

作为一名前端工程师,手写轮播图应该是最基本掌握的技能,以下是我自己原生js写的轮播,欢迎指点批评:

原生js轮播特效

首先css代码

a{text-decoration:none;color:#3DBBF5;}
   *{
    margin: 0;
    padding: 0;
   }
   .wrapper{
    width: 400px;
    height: 300px;
    margin: 100px auto;
   }
   #lunbo{
    position: relative;
    overflow: hidden;
   }
   #list{
    position: relative;
    white-space: nowrap; // 这块用行元素模拟,所以才用该属性,块元素可修改这块
   }
   #list span{
    display: inline-block;
    width: 400px;
    height: 300px;
    text-align: center;
    line-height: 300px;
    font-weight: bold;
    font-size: 100px;
    color: #fff;
   }
   #buttons{
    position: absolute;
    bottom: 0;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
   }
   #buttons span{
    display: inline-block;
    width: 15px;
    height: 5px;
    background: #fff;
    margin: 0 10px;
    cursor: pointer;
    transition: all .5s;
   }
   #buttons span.on{
    height: 20px;
   }
   .arrow{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    opacity: .3;
    transition: all .5s;
   }
   .wrapper:hover .arrow{
    opacity: 1;
   }
   #prev{
    left: 10px;
   }
   #next{
    right: 10px;
   }

然后HTML代码

<div class="wrapper">
   <div id="lunbo">
    <div id="list" style="left: -400px;">
     <span style="background:yellow;">5</span><span style="background: red;">1</span><span style="background:black;">2</span><span style="background:green;">3</span><span style="background:blue;">4</span><span style="background:yellow;">5</span><span style="background: red;">1</span>
    </div>
    <div id="buttons">
     <span index="1" class="on"></span>
     <span index="2"></span>
     <span index="3"></span>
     <span index="4"></span>
     <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow"><</a>
    <a href="javascript:;" id="next" class="arrow">></a>
   </div>
  </div>

最后js代码

window.onload=function () {
   var lunBo = document.getElementById("lunbo");
   var list = document.getElementById("list");
   var btn = document.getElementById("buttons").getElementsByTagName('span');
   var prev = document.getElementById("prev");
   var next = document.getElementById('next');
   var interval = 3000;
   var timer;
   var index = 1;
   var animated = false;
   for (var i=0;i<btn.length;i++) { //按钮加点击事件
    btn[i].onclick=function () {
     if(this.className=='on') //如果是状态按钮直接返回节约资源
     {
      return
     };
     var myIndex =parseInt(this.getAttribute('index'));//获取按钮的index属性值
     var offset = -400*(myIndex-index); //根据属性值 计算偏移量
     animate(offset)  //轮播动画
     index = myIndex; // 改变索引值
     showBtn();   //显示状态按钮
    }
   }
   function showBtn () { 
    for (var i=0;i<btn.length;i++) {
     btn[i].className=''; 
    }
    btn[index-1].className='on';
   }
   prev.onclick=function () { //上一页事件
    if (animated) { //如果是动画状态 直接返回解决bug
     return;
    }
    if (index==1) { 
     index =btn.length;
    } else{
     index-=1;
    }
    animate(400); 
    showBtn();
   }
   next.onclick=function () {
    if (animated) {
     return;
    }
    if (index==btn.length) {
     index =1;
    } else{
     index+=1;
    }
    animate(-400);
    showBtn();
   }
   function animate(offset) {
    animated = true; //表示在动画状态
    var newLeft = parseInt(list.style.left) + offset; //计算新的left值
    var time = 400; //设置动画总时间
    var interval = 10; //动画帧时间
    var speed = offset/(time/interval); //每帧运动距离
    function go () { 
     if ((speed>0 && parseInt(list.style.left)<newLeft) || (speed<0 && parseInt(list.style.left)>newLeft)) { //通过条件判断到它是否还要继续进行动画
      list.style.left = parseInt(list.style.left) + speed +'px';
      setTimeout(go,interval) 
     } else{
      animated = false; //动画状态结束
      list.style.left = newLeft + 'px'; //现在的位移
      if (parseInt(list.style.left)<-2000) { // 辅助假图
       list.style.left = -400 + 'px';
      } else if( parseInt(list.style.left)>-400){
       list.style.left = -2000 + 'px';
      }
     }
    }
    go();
   }
   function play () { 
    timer = setTimeout(function () {
     next.onclick();
     play();
    },interval)
   }
   play();
   function stop () {
    clearTimeout(timer);
   }
   lunBo.onmouseover=stop;
   lunBo.onmouseout=play;
  }

以上是所有代码,欢迎指点交流!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中OnLoad几种使用方法
Dec 15 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jQuery使用slideUp方法实现控制元素缓慢收起
Mar 27 Javascript
Javascript中数组方法汇总(推荐)
Apr 01 Javascript
巧用数组制作图片切换js代码
Nov 29 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
详解angularjs结合pagination插件实现分页功能
Feb 10 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
jQuery EasyUI Draggable拖动组件
Mar 01 Javascript
React 子组件向父组件传值的方法
Jul 24 Javascript
Javascript 编码约定(编码规范)
Mar 11 Javascript
React配置子路由的实现
Jun 03 Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
May 17 #Javascript
JavaScript中offsetWidth的bug及解决方法
May 17 #Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 #Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 #Javascript
You might like
phpMyadmin 用户权限中英对照
2010/04/02 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
PHP的反射机制实例详解
2017/03/29 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
jquery ajax return没有返回值的解决方法
2011/10/20 Javascript
解决3.01版的jquery.form.js中文乱码问题的解决方法
2012/03/08 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
JavaScript中的apply和call函数详解
2014/07/20 Javascript
jQuery中:has选择器用法实例
2014/12/30 Javascript
JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
2015/11/26 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
微信小程序中顶部导航栏的实现代码
2017/03/30 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
2017/07/04 Javascript
js CSS3实现卡牌旋转切换效果
2017/07/04 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
Vue.js计算机属性computed和methods方法详解
2019/10/12 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
2020/11/13 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python饼状图的绘制实例
2019/01/15 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python的数学算法函数及公式用法
2020/11/18 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
药剂学专业应届生自荐信
2013/09/29 职场文书
室内设计自我鉴定
2013/10/15 职场文书
应届生找工作求职信
2014/06/24 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
2015双创工作总结
2015/07/24 职场文书
关于教师节的广播稿
2015/08/19 职场文书
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers