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

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. 引用CDN内容的方法总结

    1.1.1 摘要 CDN相信大家都听说过,甚至使用过相关的技术,也许有些人会回答“没有听说过和使用过该技术”,真的是这样吗? CDN的全称是Content Delivery Network,即内容分发 ...

  2. 为什么DW的可视化下看到的效果与浏览器的效果有所区别？

    可视区不是调用外面浏览器,Dreamweav 可视化区是为用户编辑而设计. 支持最基本的 HTML 与 CSS ,对 CSS 而言,我写入样式时如果你使用最基本的样式时它显示与你浏览器中看的效果相差不 ...

  3. html2canvas截取屏幕的方法

    html2canvas截取屏幕的方法 需要放在服务上运行,否则会报错, 放在服务器里,完美运行  处理截屏模糊的方法 html2canvas 0.5.0-beta3解决截图模糊问题 需要引入html2 ...

  4. SDUT-3376_数据结构实验之查找四：二分查找

    数据结构实验之查找四:二分查找 Time Limit: 30 ms Memory Limit: 65536 KiB Problem Description 在一个给定的无重复元素的递增序列里,查找与给 ...

  5. POJ3614 [USACO07NOV]防晒霜Sunscreen

    Sunscreen Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9333   Accepted: 3264 Descrip ...

  6. PHP-xdebug+PHPStorm的debug安装（未完）

    PHP的xdebug安装 一.首先去phpinfo()查看自己的php是32还是64位的,再根据php版本在下面的网站https://xdebug.org/download.php选择xdebug插件 ...

  7. SQLserver与Mysql的区别

    参考链接:https://www.cnblogs.com/qingqing-919/p/8417773.html

  8. java 使用 POI 操作 XWPFDocumen 创建和读取 Office Word 文档基础篇

    注:有不正确的地方还望大神能够指出,抱拳了 老铁! 参考 API:http://poi.apache.org/apidocs/org/apache/poi/xwpf/usermodel/XWPFDoc ...

  9. 【python小随笔】List列表的常见函数与切片

    eval()的使用 n = ["2.3","2.56"] m = [] for i in n: k = eval(i) #只是去了最外层的双引号,单引号, 规定 ...

  10. python 编码检测工具——chardet