原生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;
  }

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

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

(0)

相关推荐

  • 原生js和jquery实现图片轮播特效

    (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的div 也可以直接使用 ul-->li形式) 4.然后是图片两端的左箭头和右箭头 5.然后是一个透明背景层,放在图片底部 6.然后是一个图片描述info层,放在透明背景层的左下角(div 或 ul-->li) 7.然后是一个按钮层,用来定位图片组的index吧,放在透明背景层的右下角(div

  • JavaScript实现带标题的图片轮播特效

    图片轮播,在一些购物网站上运用的不胜枚举,下面简单介绍一下图片轮播的实现. 如图 CSS代码: <style type="text/css"> .body{ width:524px; border:solid 1px #666; margin-left:auto; margin-right:auto; } .bg{ background-color:#E0E0E0; height:20px; border-top:solid 1px #B4B4B4; } .number{

  • 原生js实现图片轮播特效

    本文特意为原生js实现图片轮播特效代码做了下总结,分享给大家供大家参考,欢迎大家学习. 运行效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播广告</title> <style> body, div, ul, li { margin: 0; padding: 0

  • 让图片跳跃起来 javascript图片轮播特效

    图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现. 图片跳动起来 图片序列控制的实现 前后按钮控制的实现 这篇文章来看图片按照间隔时间进行切换. 我们先把结构代码完成,这个我就不做详细的讲解了.看效果 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <sty

  • js仿小米官网图片轮播特效

    小米官网给我的感觉是大气.干净.很多特效的加入让人觉得耳目一新,big满满. 看到他们首页的轮播图实现挺有意思,于是自己模仿着写了一个. 大致的感觉出来了,贴个图先: 通过前端神器chrom的F12观察小米官网的html代码,不难看到他们使用5个div包裹图片并使用了定位通过z-index来控制div层级,通过控制每个div的opacity属性和display属性进行元素的显示.隐藏. 截图如下(红框内的opacity属性): 好的,实现的手段知道了,那么页面布局先搞出来. <!DOCTYPE

  • 基于javascript实现样式清新图片轮播特效

    本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下 一.实现效果 如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 2.鼠标放到大图片上面的时,图片停止轮换,一直显示当前图片:鼠标移开后图片继续轮换 3.鼠标移到小图标上时,大图片区域会显示对应的大图:鼠标移开则从当前图片开始继续轮换 二.代码 <!DOCTYPE html> <html> <head lang="en"&g

  • js图片轮播特效代码分享

    本文实例讲述了js图片轮播特效,分享给大家供大家参考.具体如下: 这是一款基于javascript实现的图片轮播特效代码,有缩略图和标题,可以自定义标题. 运行效果图:                    -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js图片轮播特效代码如下 <head> <meta http-equiv="Content-Type" co

  • js制作网站首页图片轮播特效代码

    本文实例为大家分享了使用js制作一般网站首页图片轮播效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮播</title> <style> .warp{ width: 600px; height: 750px; position: relative;

  • 很棒的一组js图片轮播特效

    大家经常在网页中使用轮播效果,本文为大家分享的是一组图片轮播特效,希望大家喜欢 先看一眼效果图: 代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style> *{padding:0;margin:0;} #content{width:550px;height:300px;margin:50

  • 轻松实现javascript图片轮播特效

    本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下 还是先来看一看效果图: 具体代码: 一.HTML代码分析 <body> <div class="dota"> <ul id="content"> <li><a href="#"><img src="images/1.jpg"/></a>&l

随机推荐