原生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 相关文章推荐
再谈ie和firefox下的document.all属性
Oct 21 Javascript
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
Feb 14 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
js 转义字符及URI编码详解
Feb 28 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
vue-lazyload使用总结(推荐)
Nov 01 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
解决Vue router-link绑定事件不生效的问题
Jul 22 Javascript
js绘制一条直线并旋转45度
Aug 21 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
php过滤危险html代码
2008/08/18 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
PHP开发框架kohana3 自定义路由设置示例
2014/07/14 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
基于JavaScript 声明全局变量的三种方式详解
2013/05/07 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
2016/03/10 Javascript
JS中跨页面调用变量和函数的方法(例如a.js 和 b.js中互相调用)
2016/11/01 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
详解webpack3如何正确引用并使用jQuery库
2017/08/26 jQuery
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
vue实现在线学生录入系统
2020/05/30 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
python 二分查找和快速排序实例详解
2017/10/13 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
python3的url编码和解码,自定义gbk、utf-8的例子
2019/08/22 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
解决django FileFIELD的编码问题
2020/03/30 Python
创业计划书中要认真思考的问题
2013/12/28 职场文书
《桂林山水》教学反思
2014/02/08 职场文书
药学职务聘任书
2014/03/29 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
校本研修个人总结
2015/02/28 职场文书
银行求职自荐信范文
2015/03/04 职场文书
2015年财务部年度工作总结
2015/05/19 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
红色革命电影观后感
2015/06/18 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
2017元旦、春节期间廉洁自律承诺书
2016/03/25 职场文书
mysql 索引合并的使用
2021/08/30 MySQL