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

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. 使用nuxt.js官方脚手架构建koa2的es6编译问题

    最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢? 这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编 ...

  2. [Vue CLI 3] @vue/cli-plugin-eslint 源码分析

    熟悉 eslint-loader 的同学一般如下配置: 设置一下几项: test : A condition that must be met(一般是处理对应文件的正则) exclude : A co ...

  3. SDUT-3377_数据结构实验之查找五：平方之哈希表

    数据结构实验之查找五:平方之哈希表 Time Limit: 400 ms Memory Limit: 65536 KiB Problem Description 给定的一组无重复数据的正整数,根据给定 ...

  4. 阿里云ecs环境配置

    在阿里云 CentOS 服务器(ECS)上搭建 nginx + mysql + php-fpm 环境 https://ninghao.net/blog/1368 阿里云ecs从购买到环境搭建和建站!! ...

  5. ios开发ARC，IBOutlets之strong与weak

    今天在写程序的时候,用IBOutlets连了一个自定义的控件,出现了问题,后面访问的时候,控件里有些subviews没有初始化好,取到的时候为nil, 程序里用了ARC, IBOutlets一连接上, ...

  6. POJ 1679The Unique MST

    Description Given a connected undirected graph, tell if its minimum spanning tree is unique. Definit ...

  7. 详解 CALayer 和 UIView 的区别和联系

    http://www.cocoachina.com/ios/20150828/13244.html 作者:@武蕴牛x 授权本站转载. 前言 前面发了一篇iOS 面试的文章,在说到 UIView 和 C ...

  8. 原生js扫雷代码

    思路要点: 1. 随机地雷放到一个二维数组中: 2. 每一个格子要统计周围有几颗雷: 3. 每一个格子是否处于打开状态,用于判断是否赢得游戏: 4. 如果点击到周围没有雷的地方,把周围的打开: 具体的 ...

  9. c++：三

    C++:三   对于共享数据的保护,我们可以使用常量,在使用数据的同时也防止了数据被修改,即可有效的保护数据. 常对象   常对象必须在定义对象时就使用"const"关键字将指定对 ...

  10. maven修改版本号

    1.修改版本 mvn versions:set -DnewVersion=xxx 2.回滚版本,提交后不能回滚 mvn versions:revert 3.提交版本变更 mvn versions:co ...