原生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经典效果集锦
Jul 06 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
Jan 08 Javascript
javascript实现表单提交后,提交按钮不可用的方法
Apr 18 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
Aug 29 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
Bootstrap BootstrapDialog使用详解
Feb 17 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
Mar 06 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
Apr 09 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
vue图片上传组件使用详解
Dec 23 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
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP下打开URL地址的几种方法小结
2010/05/16 PHP
php中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
DEDE实现转跳属性文档在模板上调用出转跳地址
2016/11/04 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
javascript得到XML某节点的子节点个数的脚本
2008/10/11 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】
2017/03/09 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
JavaScript使用小插件实现倒计时的方法讲解
2019/03/11 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python 实现文件的递归拷贝实现代码
2012/08/02 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python实现机器人行走效果
2018/01/29 Python
python字符串string的内置方法实例详解
2018/05/14 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python 列表中[ ]中冒号‘:’的作用
2019/04/30 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Python xmltodict模块安装及代码实例
2020/10/05 Python
python读取excel数据绘制简单曲线图的完整步骤记录
2020/10/30 Python
CSS3+HTML5+JS 实现一个块的收缩与展开动画效果
2020/11/17 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
大专应届生个人简历的自我评价
2013/10/15 职场文书
詹天佑教学反思
2014/04/30 职场文书
创建文明城市标语
2014/06/16 职场文书
团员自我评价范文
2015/03/10 职场文书
开学典礼致辞
2015/07/29 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang