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

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. 【python之路9】类型定义与转换

    一.整型(int),int的作用 1.创建int类型并赋值 n = 10 或者 n = int(10)   #只要是类名加括号,都会去执行类中的 __init__()方法 n = 10,实际内部会去执 ...

  2. LUOGU P2921 [USACO08DEC]在农场万圣节Trick or Treat on the Farm

    传送门 解题思路 记忆化搜索,如果搜到环,就将环的大小处理出来. 代码 #include<iostream> #include<cstdio> #include<cstr ...

  3. HDU 4006优先队列

    //按照降序排列,而且队列中只保存k个元素 #include<stdio.h> #include<queue> using namespace std; int main(){ ...

  4. 【Pyqt5】之高级控件QTableWidget的使用

    1:动态渲染数据+动态添加控件(按钮,进度条) class MainWindow(QWidget, Ui_MainFrom): def __init__(self): super(MainWindow ...

  5. 前端框架中 “类mixin” 模式的思考

    "类 mixin" 指的是 Vue 中的 mixin,Regular 中的 implement 使用 Mixin 的目的 首先我们需要知道为什么会有 mixin 的存在? 为了扩展 ...

  6. golang的包导入import

    import别名/点下划线(1)import关键字的作用:作用是导入该go源文件所依赖的package包.用在go源文件中,紧接在pakage后面的部分.(2)只要在源文件中用到了的package包就 ...

  7. left join table_a on ...like...

  8. LeetCode172 Factorial Trailing Zeroes. LeetCode258 Add Digits. LeetCode268 Missing Number

    数学题 172. Factorial Trailing Zeroes Given an integer n, return the number of trailing zeroes in n!. N ...

  9. thinkphp5.0 模板包含文件

    在index.html里包含layout.html:{include file=“layout”}它这里是以绝对路径查找所包含的文件,默认是view目录下 在这种情况下,要在在index.html里包 ...

  10. js、php判断手机PC

    用于phpcms <script type="text/javascript"> var url = window.location.href; if(/Android ...