原生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 相关文章推荐
单击某一段文字改写文本颜色
Jun 06 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
jQuery插件boxScroll实现图片轮播特效
Jul 14 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
Aug 04 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
使用clipboard.js实现复制功能的示例代码
Oct 16 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 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
基于thinkPHP实现的微信自定义分享功能示例
2016/09/23 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
Js之软键盘实现(js源码)
2007/01/30 Javascript
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
js tab 选项卡
2009/04/26 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
2013/07/31 Javascript
使用js写的一个简易的投票
2013/11/27 Javascript
JavaScript对IE操作的经典代码(推荐)
2014/03/10 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
Vue2几种常见开局方式详解
2017/09/09 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
Python psutil模块简单使用实例
2015/04/28 Python
深入解析Python中的lambda表达式的用法
2015/08/28 Python
python接口自动化测试之接口数据依赖的实现方法
2019/04/26 Python
Python Django Vue 项目创建过程详解
2019/07/29 Python
python flask搭建web应用教程
2019/11/19 Python
解决pycharm 安装numpy失败的问题
2019/12/05 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Python如何对齐字符串
2020/07/30 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
HUGO BOSS美国官方网上商店:世界知名奢侈品牌
2017/08/04 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
毕业生机械建模求职信
2013/10/14 职场文书
个人简历自我评价八例
2013/10/31 职场文书
常务副总经理任命书
2014/06/05 职场文书
暑期教师培训方案
2014/06/07 职场文书
人代会简报
2015/07/21 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python