又是轮播？没错，换个样式玩轮播。

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>before</title>

</head>

<body>

  <div class="box">

    <img class="front" src="img/A.jpg" alt="PIC">

    <img class="back" src="img/B.jpg" alt="PIC">

    <img class="active" src="img/C.jpg" alt="PIC">

    <div class="btns">

      <span class="btn">&lt;</span>

      <span class="btn">&gt;</span>

    </div>

  </div>

</body>

</html>

CSS:

  <style>

    .box {width: 1200px; height: 300px; transform-style: perserve-3d; margin: 50px auto; position: relative;}

    .box img{width:600px; position: absolute; top: 60px; transition:all .3s linear;}

    .box:hover .btn{opacity:;}

    .front {left: 0px;}

    .back {left: 600px;}

    .active {left: 300px; transform: scale(1.5); z-index:;}

    .btns .btn {width: 60px; height: 60px; display: block; position: absolute; background-color: rgba(0,0,0,.5); font-size: 50px; font-family: "微软雅黑"; color:rgba(255,255,255,.5); line-height: 55px; text-align: center; cursor: pointer; z-index:; opacity:; transition:opacity .3s linear;}

    .btns .btn:first-child {top: 125px;}

    .btns .btn:last-child {top: 125px; right: 0px;}

  </style>

JS:

  <script>

    onload = function(){

      var btns = document.getElementsByClassName('btn'),

          imgs = document.getElementsByClassName('box')[0].getElementsByTagName('img');

      var index = 2,

          front = 0,

          back = 0,

          offset = false,

          timer = setInterval(timer,5000);

      for(var i=0;i<btns.length;i++){

        (function(i){

          btns[i].onclick = function(){click(i)};

        })(i);

        btns[i].onmouseover = function(){

          offset = true;

        }

        btns[i].onmouseout = function(){

          offset = false;

        }

      }

      for(var i=0;i<imgs.length;i++){

        imgs[i].onmouseover = function(){

          offset = true;

        }

        imgs[i].onmouseout = function(){

          offset = false;

        }

      }

      function timer(){

        console.log(offset)

        if(offset){

          return;

        }

        else{

          click(1)

        }

      }

      function click(x){

        imgs[index].setAttribute('class','');

        if(x === 0){

         if(--index < 0){

            index = --imgs.length;

          }

          front = back = index;

          if(++front > --imgs.length){front = 0}

          if(--back < 0){back = --imgs.length}

          imgs[front].style.zIndex = '1';

          imgs[back].style.zIndex = '0';

        }

        else{

          if(++index > --imgs.length){

            index = 0;

          }

          front = back = index;

          if(++front > --imgs.length){front = 0}

          if(--back < 0){back = --imgs.length}

          imgs[front].style.zIndex = '0';

          imgs[back].style.zIndex = '1';

        }

        imgs[index].style.zIndex = '10';

        imgs[front].setAttribute('class','front')

        imgs[back].setAttribute('class','back')

        imgs[index].setAttribute('class','active');

      }

    }

  </script>

【原生JS】层叠轮播图的更多相关文章

  1. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  2. 原生js实现轮播图

    原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...

  3. 封装一个简单的原生js焦点轮播图插件

    轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...

  4. 原生JS实现轮播图的效果

    原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...

  5. 使用原生js将轮播图组件化

    代码地址如下:http://www.demodashi.com/demo/11316.html   这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...

  6. 用原生js封装轮播图

    原生js封装轮播图 对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...

  7. 原生js焦点轮播图的实现

    继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...

  8. 原生js封装轮播图

    个人实际开发中用到的效果问题总结出来便于自己以后开发查看调用,如果也适用其他人请随意拿走勿喷就行! 原生js对于思路要求比较高,在js代码我都写有备注,足够理解并使用,即使是小白或者刚入行的程序员也比 ...

  9. 原生JS设计轮播图

    一.效果预览: 由于只能上传2M以下的图片,这里只截取了自动切换的效果: 二.编写语言 HTML.CSS.原生JS 三.编写思路 (一)HTML部分 1..slide意为滑槽,里面存放所有图片: 2. ...

  10. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

  1. 使用log4j打印日志

    在项目中我们必不可少需要打印日志,通过日志我们可以查看系统的运行状态是否正常,当程序出现异常的时候,我们也可以通过查看日志来定位问题的位置,给程序员的工作带来了极大的便利. 以下这边博客的内容是我从一 ...

  2. cf round 482E Kuro and Topological Parity

    题意:一个长度为$n$的序列,一些地方是$0$,一些地方是$1$,$-1$的地方你可以选择填$0$或者$1$,你可以选择连一些边$x->y$满足$x<y$ 请问有多少种填数并连边的方法,使 ...

  3. SSH 相关基础

    检查是否安装: sudo apt-cache policy openssh-client sudo apt-cache policy  openssh-server 也可直接用 sudo apt-ca ...

  4. hdu 1671&& poj 3630 (trie 树应用)

    Phone List Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 25280   Accepted: 7678 Descr ...

  5. DMSkin https://github.com/944095635/DMSkin

    与源码无关内容 1.如果你有XAML相关的外包需求,可以通过QQ或微信与我取得联系.(QQ:"944095635" 微信号:"qq944095635") 2.我 ...

  6. [java]反射1 2017-06-25 21:50 79人阅读 评论(10) 收藏

    很多东西的实现基础,都是反射,spring的AOP,动态代理等等,下面咱们来学习一下Java的反射 什么是反射? JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法:对于 ...

  7. Directx11教程40 纹理映射(10)

    原文:Directx11教程40 纹理映射(10)      本章尝试使用纹理行列式,或者说纹理数组,在ps中,使用2个纹理,最终的像素颜色,是光照颜色*纹理1采样颜色*纹理2采样颜色,主要是想达到如 ...

  8. getElementsByClassName兼容低版本浏览器

    var getElementsByClassName = function (searchClass, node,tag) { if(document.getElementsByClassName){ ...

  9. php中括号定义数组

    php5.3及之前的版本是不支持中括号定义数组的.5.4之后支持. 错误信息是,不识别“[”

  10. Java SDUT-2562_相似三角形

    相似三角形 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 给出两个三角形的三条边,判断是否相似. Input 多组数据 ...