<!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. XM概述

    概述: Extensible Markup Language: 可扩展的标记语言 特点: 语法很严格 标签自定义 作用: * 存储数据 * 做配置文件 * 用于进行数据传输 文档声明: 标示这个文档是 ...

  2. 漫谈Objective-C在语法上的改进

    Objective-C 2.0从2006年正式发布至今已经有10年了.Apple在此期间也不断地为其注入新的语法特性,比如Blocks.NSNumber literal.NSArray literal ...

  3. as 什么意思？

    You can denote particular console messages and variable values as having different types using four ...

  4. SqlServer2008数据库的备份与还原

    1.先是备份数据 1.1.登录sql server management studio 1.2.选中需要备份数据库,右击鼠标,如下图: 1.3.点击备份之后,如下图; 2.数据还原准备 ps: 在开始 ...

  5. 生产者-消费者问题与quene模块

    生产者-消费者问题与quene模块 下面使用线程锁以及队列来模拟一个典型的案例:生产者-消费者模型.在这个场景下,商品或服务的生产者生产商品,然后将其放到类似队列的数据结构中,生产商品的时间是不确定的 ...

  6. KMP --关于cogs1570 乌力波

    题目链接:http://cogs.pro:8081/cogs/problem/problem.php?pid=vQzXJkgWa [题目描述] 法国作家乔治·佩雷克(Georges Perec,193 ...

  7. 大数据(bigdata)练习题

    1.在HDFS文件系统的根目录下创建递归目录“1daoyun/file”,将附件中的BigDataSkills.txt文件,上传到1daoyun/file目录中,使用相关命令查看文件系统中1daoyu ...

  8. HIVE配置mysql metastore

    HIVE配置mysql metastore    hive中除了保存真正的数据以外还要额外保存用来描述库.表.数据的数据,称为hive的元数据.这些元数据又存放在何处呢?    如果不修改配置hive ...

  9. UWP 保存音乐或视频缩略图图片到本地

    开发项目时,有时需要将本地媒体文件的缩略图保存到本地,下面是源码. 需要打开Package.appxmanifest 功能 图片库 访问权限. <Page x:Class="SaveB ...

  10. Hadoop之HDFS客户端操作

    1. HDFS 客户端环境准备 1.1 windows 平台搭建 hadoop 2.8.5 2. 创建Maven工程 # pom.xml <dependencies> <depend ...