<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>轮播图-不用jquery</title>

  <style>

    *{

      padding:0;

      margin:0;

    }

    .view{

      width: 1000px;

      height: 600px;

      margin: 0px auto;

      margin-top:30px;

      position: relative;

    }

    .view > ul{

      list-style: none;

      width: 100%;

      height: 100%;

      transform: rotate3d(1,1,0,0deg);

      transform-style: preserve-3d;

    }

    .view > ul > li{

      width: 20%;

      float: left;

      height: 100%;

      position: relative;

      transform-style: preserve-3d;

      transition: transform ;

      transition-duration: 0.5s;

    }

    .view > ul > li > span{

      display: block;

      width: 100%;

      height: 100%;

      position: absolute;

      left: 0;

      top:0;

    }

    .view > ul > li > span:nth-of-type(1){

      background: url("./img/img1.jpg");

      transform: translateZ(300px);

    }

    .view > ul > li > span:nth-of-type(2){

      background: url("./img/img2.jpg");

      transform: translateY(-300px) rotate3d(1,0,0,90deg);

    }

    .view > ul > li > span:nth-of-type(3){

      background: url("./img/img3.jpg");

      transform: translateZ(-300px) rotate3d(1,0,0,180deg);

    }

    .view > ul > li > span:nth-of-type(4){

      background: url("./img/img4.jpg");

      transform: translateY(300px) rotate3d(1,0,0,-90deg);

    }

    .view > ul > li:nth-of-type(1) > span{

      background-position: 0,0;

    }

    .view > ul > li:nth-of-type(2) > span{

      background-position: -100%,0;

    }

    .view > ul > li:nth-of-type(3) > span{

      background-position: -200%,0;

    }

    .view > ul > li:nth-of-type(4) > span{

      background-position: -300%,0;

    }

    .view > ul > li:nth-of-type(5) > span{

      background-position: -400%,0;

    }

    .view > .button > a{

      position: absolute;

      top:50%;

      transform: translateY(-50%);

      display: block;

      background: rgba(0,0,0,0.5);

      height: 50px;

      line-height: 50px;

      text-decoration: none;

      text-align: center;

      width: 50px;

      color: #fff;

      font-size: 30px;

    }

    .view > .button > a.pre{

      left:5px;

    }

    .view > .button > a.next{

      right:5px;

    }

  </style>

</head>

<body>

<div class="view">

  <ul>

    <li>

      <span></span>

      <span></span>

      <span></span>

      <span></span>

    </li>

    <li>

      <span></span>

      <span></span>

      <span></span>

      <span></span>

    </li>

    <li>

      <span></span>

      <span></span>

      <span></span>

      <span></span>

    </li>

    <li>

      <span></span>

      <span></span>

      <span></span>

      <span></span>

    </li>

    <li>

      <span></span>

      <span></span>

      <span></span>

      <span></span>

    </li>

  </ul>

  <div class="button">

    <a href="javascript:void(0)" class="pre"><</a>

    <a href="javascript:void(0)" class="next">></a>

  </div>

</div>

<script>

  window.onload = function(){

    let count = 0 //点击次数，根据这个变化点击角度

    let flag = true //防止多次点击

    document.querySelector('.next').onclick = function(){ //点击下一页

      if(flag){

        flag = false

        count++

        var li = document.querySelectorAll('li')

        li.forEach(function(value,key,arr){

          value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`

          value.style['transition-delay'] = key * 0.1 + 's'

        })

        setTimeout(function(){

          flag = true

        },800)

      }

    }

    document.querySelector('.pre').onclick = function(){ //点击上一页

      if(flag){

        flag = false

        count--

        var li = document.querySelectorAll('li')

        li.forEach(function(value,key,arr){

          value.style.transform = `rotate3d(1,0,0,-${count*90}deg)`

          value.style['transition-delay'] = key * 0.1 + 's'

        })

        setTimeout(function(){

          flag = true

        },800)

      }

    }

  }

</script>

</body>

</html>

　　

轮播图--使用原生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手动轮播图

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...

  9. 利用原生JS实现网页1920banner图滚动效果

    内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

随机推荐

  1. SQL-W3School-高级：SQL 撤销索引、表以及数据库

    ylbtech-SQL-W3School-高级:SQL 撤销索引.表以及数据库 1.返回顶部 1. 通过使用 DROP 语句,可以轻松地删除索引.表和数据库. SQL DROP INDEX 语句 我们 ...

  2. c++ for_each

    #include<iostream>#include<algorithm>#include<vector>using namespace std; int main ...

  3. apache定制错误页面

    编辑配置文件,错误页面定制支持三种形式: 1. 普通文本 2. 本地跳转 3. 外部跳转 [root@ken-node2 ~]# vim /etc/httpd/conf/httpd.conf ... ...

  4. android 超简单的拖动按钮 悬浮按钮 吸附按钮 浮动按钮

    第一种    第二种    第一种实现方法 xml布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/re ...

  5. kubernetes之StatefulSet部署zk和kafka

    前提 至少需要三个node节点,否则修改亲和性配置 如果外部访问,需要自己暴露 需要有个storageClass,这样做的原因是避免手动创建pv了 部署zk和kafka 参考: https://www ...

  6. C-LODOP的端口和网站的端口

    c-lodop的端口和网站的端口是不同的,不需要修改自己网站的端口.c-lodop32位标准版端口:8000,18000 (http网站)c-lodop32扩展版端口:8000,18000(http网 ...

  7. 部署zabbix监控平台（源码安装）

    案例:部署Zabbix监控平台 1 问题 本案例要求部署一台Zabbix监控服务器,一台被监控主机,为进一步执行具体的监控任务做准备: 安装LNMP环境 源码安装Zabbix 安装监控端主机,修改基本 ...

  8. Thingsboard源码编译，小白新坑随笔

    在Thingsboard源码编译过程中,遇见的问题总结: 1.Thingsboard Server UI 模块编译,无法执行“npm install ”:出现错误信息:Failed to execut ...

  9. 什么是梯度下降法与delta法则？

    梯度下降法就是沿梯度下降的方向求解函数(误差)极小值.delta法则是使用梯度下降法来找到最佳权向量.拿数字识别这个案例为例,训练模型的过程通常是这样的.输入为1万张图片,也就是1万个样本,我们定义为 ...

  10. P61IDEA的常用快捷键

    Alt+Enter   导入包,自动修正代码 Ctrl+Y  删除光标所在行 Ctrl+D 复制光标所在行的内容,插入光标位置下面 Ctrl+Alt+L  格式化代码 Ctrl+/   单行注释 Al ...