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

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. Python3 中 configparser 模块用法

    configparser 简介 configparser 是 Pyhton 标准库中用来解析配置文件的模块,并且内置方法和字典非常接近.Python2.x 中名为 ConfigParser,3.x 已 ...

  2. 【JZOJ4711】【NOIP2016提高A组模拟8.17】Binary

    题目描述 输入 输出 样例输入 6 6 8 9 1 13 9 3 1 4 5 2 6 9 1 3 7 2 7 7 1 6 1 2 11 13 样例输出 45 19 21 数据范围 解法 40%暴力即可 ...

  3. Python学习笔记（三）字符串类型及其操作（2）

    1.字符串的表示 字符串是字符的序列表示,可以由一对单引号(‘).双引号(“)或三引号(’‘’)构成.其中,单引号.双引号和三引号都可以表示单行字符串,但是只有三引号可以表示多行字符串 在使用双引号时 ...

  4. vue+axios 对restful 请求封装

    礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...

  5. 【Vue】详解组件的基础与高级用法

    Vue.js 最核心的功能就是组件(Component),从组件的构建.注册到组件间通信,Vue 2.x 提供了更多方式,让我们更灵活地使用组件来实现不同需求. 一.构建组件 1.1 组件基础 一个组 ...

  6. 在liferay 7中如何删除service builder已经生成的数据库table

    在Liferay 7中,加了数据库保护机制,你改了service.xml的结构后,重新运行service builder,并不会帮你生成新的数据库表.然后你发现你在数据库中自己手动删除了表后,重新部署 ...

  7. git安装方法

    点击 http://git-scm.com/download 选择你使用的操作系统,如果是linux就可以看到命令行,windows则是下载客户端

  8. python中字母的大小写转换

    1.   capitalize(): 首字母大写,其余全部小写 2.   upper() :全转换成大写 3.   lower(): 全转换成小写 4.   title() :标题首字大写,如  &q ...

  9. spring - constructor-arg的常规用法

     1.使用构造子注入时,则使用constructor-arg子标签,来指定构造函数的参数.    <bean id="provider" class="com.ap ...

  10. 仿Google Nexus菜单样式

    在线演示 本地下载