轮播图--使用原生js的轮播图

<!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的轮播图的更多相关文章

原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
原生js实现轮播图
原生js实现轮播图很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
封装一个简单的原生js焦点轮播图插件
轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放(为了方便理解,没有补2张图做无缝轮播).本篇文章的主要目的是分享封装插件的思路. 轮播图我一开始是写成非 ...
原生JS实现轮播图的效果
原生JS实现轮播图的效果: 只要缕清了全局变量index的作用,这个轮播图也就比较容易实现了:另外,为了实现轮这个效果,有几处clearInterval()必须写上.废话不多说,直接上代码,修复了几个 ...
使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
用原生js封装轮播图
原生js封装轮播图对于初学js的同学来说,轮播图还是一个难点,尤其是原生js封装轮播图代码,下面是我之前做的一个轮播图项目中封装好的一些代码,有需要的同学可以看一下,有什么不懂的可以看注释,注释看不 ...
原生js焦点轮播图的实现
继续学习打卡,武汉加油,逆战必胜!今日咱们主要探讨一下原生js写轮播图的问题, 简单解析一下思路: 1,首先写好css样式问题 2,考虑全局变量:自动播放的定时器,以及记录图片位置的角标Index 2 ...
原生js手动轮播图
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一 ...
利用原生JS实现网页1920banner图滚动效果
内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920ba ...

随机推荐

python 调用父类方法，重写父类构造方法，不显式调用，会报错
子类不显式调用父类的构造方法,而父类构造函数初始化了一些属性,就会出现问题如果子类和父类都有构造函数,子类其实是重写了父类的构造函数,如果不显式调用父类构造函数,父类的构造函数就不会被执行,导致子类 ...
<JavaScript> call()、apply()、bind() 的用法
其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全理解! 先看明白下面: 例 1 obj.objAge; obj.myFun() // 小张年龄 undefined 例 2 shows() ...
为什么使用 Web Services?
最重要的事情是协同工作由于所有主要的平台均可通过 Web 浏览器来访问 Web,不同的平台可以借此进行交互.为了让这些平台协同工作,Web 应用程序被开发了出来. Web 应用程序是运行在 Web ...
ZSDR017
*---------------------------------------------------------------------- *ZSDR017-客户订货价格和库存 *-------- ...
nginx反向代理本地两台web负载均衡使用ip+端口代理
环境: 本地外网ip:123.58.251.166 .配置index.html网页 [root@host---- conf.d]# cat /web/sing/index.html <h1> ...
Spring Boot连接MySQL长时间不连接后报错`com.mysql.cj.core.exceptions.ConnectionIsClosedException: No operations allowed after connection closed.`的解决办法
报错:com.mysql.cj.core.exceptions.ConnectionIsClosedException: No operations allowed after connection ...
matlab 提取图像轮廓（图像边缘提取）
利用edge()函数提取图像轮廓,绘制出对象的边界和提取边界坐标信息,matlab实现代码如下: close all;clear all;clc; % 提取图像轮廓,提取图像边缘 I = imread ...
用Python给你的代码上个进度条吧 | 【代码也要面子的】
微信公众号:AI算法与图像处理如果你觉得对你有帮助,欢迎关注.转发以及点赞哦-(￣▽￣-)~ 前言最近在跑一些代码的时候,很烦...因为有时候不知道这段程序什么时候能执行完,现在执行哪里了,如果报错 ...
【DSP开发】CMD文件
DSP的存储器的地址范围,CMD是主要是根据那个来编的. CMD 它是用来分配rom和ram空间用的,告诉链接程序怎样计算地址和分配空间. 所以不同的芯片就有不同大小的rom和ram.放用户程序的地方 ...
最新人民网java校招面经（含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.人民网等10家互联网公司的校招Offer,因为某些自身原因最终选择了人民网.6.7月主要是做系统复习.项目复盘.LeetCo ...

轮播图--使用原生js的轮播图

轮播图--使用原生js的轮播图的更多相关文章

随机推荐

热门专题