h5-切割轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,ul,li,span{
margin: 0;
padding: 0;
}
.view{
width: 1920px;
height: 1080px;
margin: 100px auto;
position: relative;
}
ul{
width: 100%;
height: 100%;
list-style: none;
/*transform: rotate3d(1,1,0,-30deg);*/
transform-style: preserve-3d;
}
ul >li{
width: 20%;
height: 100%;
float: left;
position: relative;
transform-style: preserve-3d;
/*添加过度效果*/
transition: transform 0.5s; }
ul > li > span{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
/*其实就是一个立方体的四个面，来转换*/
ul > li > span:nth-of-type(1){
background: url("../img/lunbo1.jpg");
transform: translateZ(540px);
}
ul > li > span:nth-of-type(2){
background: url("../img/lunbo2.jpg");
transform: translateY(-540px) rotateX(90deg);
}
ul > li > span:nth-of-type(3){
background: url("../img/lunbo3.jpg");
transform: translateZ(-540px) rotateX(180deg);
}
ul > li > span:nth-of-type(4){
background: url("../img/lunbo4.jpg");
transform: translateY(540px) rotateX(-90deg);
} /*设置每一个li元素的span所显示的图片的·位置.每一个往自己地左边偏移相应的位置，不然会都显示第一个li的图片*/
ul> li:nth-of-type(2) > span {
background-position: -100% 0;
}
ul> li:nth-of-type(3) > span {
background-position: -200% 0;
}
ul> li:nth-of-type(4) > span {
background-position: -300% 0;
}
ul> li:nth-of-type(5) > span {
background-position: -400% 0;
} .pre,.next{
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
position: absolute;
top: 50%;
text-decoration: none;
font-size: 170px;
transform: translate(0,-50%);
background-color: rgba(0,0,0,0.5);
color: #fff;
}
.pre{
left: 0;
}
.next{
right: 0;
}
</style>
</head>
<body>
<div class="view">
<ul>
<!--每一个li就是一个结构快-->
<li>
<!--每一个span就是结构快的某一面，用来显示图片-->
<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>
<span></span>
</li>
</ul>
<a href="javascript:;" class="pre"><</a>
<a href="javascript:;" class="next">></a>
</div>
<script src="../js/jquery-3.4.1.js"></script>
<script>
$(function () {
/*定义一个图片的索引*/
var index=0;
/*添加节流阀 true说明本次单击会相应处理*/
var flag = true;
/*下一张*/
$(".next").on("click",function () {
if (flag==true){
flag=false;
index--;
/*所谓下一张，就是将所有li元素围绕x旋转*/
$("li").each(function (key,value) {
/*通过添加transform样式进行旋转*/
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
"transition-delay":(key*0.2)+"s"
});
}); setTimeout(function () {
flag=true;
},1000);
}; });
/*上一张*/
$(".pre").on("click",function () {
if (flag==true){
flag=false;
index++;
/*所谓下一张，就是将所有li元素围绕x旋转*/
$("li").each(function (key,value) {
/*通过添加transform样式进行旋转*/
$(this).css({
"transform":"rotateX("+(index*90)+"deg)",
"transition-delay":(key*0.2)+"s"
});
}); setTimeout(function () {
flag=true;
},1000);
}; });
});
</script>
</body>
</html>
h5-切割轮播图的更多相关文章
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- 带锁的3D切割轮播图
3D切割轮播图. 加入锁,限制点击太快次数 <!DOCTYPE html><html><head lang="en"> <meta cha ...
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- transform—切割轮播图
效果演示: 1.结构分析 第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...
- 3D切割轮播图
预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...
- 一分钟学会如何自定义小程序轮播图（蜜雪冰城Demo）
最近开发小程序项目用到了轮播图,默认的有点单调,作为后端程序员,研究一番最终实现了.本文会从思路,代码详细介绍,相信读过此文后,不管以后在开发中碰到轮播图还是需要自定义修改其他的样式都可以按这个思路解 ...
- H5制作显示轮播图的方法Swiper
1.需要引入Swiper插件 <!-- swiper插件 --> <link rel="stylesheet" href="https://unpkg. ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- swiper轮播问题之一：轮播图内容为动态数据生成时轮播图无法自动轮播
本人在用H5做移动端项目中使用Swiper遇到的两个问题,因此加深了对Swiper的掌握,分享出来对刚开始接触Swiper的童鞋们或多或少会有帮助. 首先,new Swiper的初始化最 ...
随机推荐
- Linux基础命令之——边边角角
linux基础指令的内容较多,总共一百多条,包含一些服务120条左右(误差不超过一个亿),选项也五花八门,但是有些较为实用的命令或者选项在使用的过程中又会一时想不起来,降低了工作效率. 因此,专门做一 ...
- php 文件缓存 include vs serialize vs json_encode
大神:http://techblog.procurios.nl/k/news/view/34972/14863/cache-a-large-array-json-serialize-or-var_ex ...
- Scala match 变量
昨天写 Scala 的时候,使用 match(相当于 switch)时,运行结果很奇怪. var i: Int = 0 while (i < items.length) { i % width ...
- [转]SparkSQL – 有必要坐下来聊聊Join
转载自网易范欣欣http://hbasefly.com Join背景介绍 Join是数据库查询永远绕不开的话题,传统查询SQL技术总体可以分为简单操作(过滤操作-where.排序操作-limit等), ...
- DevOps - 实施原则
章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...
- SDRAM调试总结
SDRAM的调试总结 1 说明 实验平台: JZ2440 CPU: S3C2440 SDRAM型号: EM63A165TS-6G 2 SDRAM的一些基本概念 2.1 引脚分配 2.2 引脚描 ...
- windows中的运行命令
首先按“开始”-“运行”,或按WIN键+R,进入『运行』窗口. 下面是常用的运行命令 (按英文字符顺序排列) appwize.cpl----添加.删除程序 access.cpl-----辅助功能选项 ...
- 洛谷 P3133 [USACO16JAN]Radio Contact G
题目传送门 解题思路: f[i][j]表示FJ走了i步,Bessie走了j步的最小消耗值.方程比较好推. 横纵坐标要搞清楚,因为这东西WA了半小时. AC代码: #include<iostrea ...
- 2.13 ViewModel 使数据即使在后台被杀死数据也能存活
操作程序如下: 主要是创建一个 SavedStateHandle 来缓存上一次的数据,并通过重新读取上一次存储的数据来实现数据的存活 MyVIewModel: package com.example. ...
- 070-PHP数组相加
<?php $arr1=array('a','b','c'); //定义一个数组 echo '数组$arr1的信息:<br />'; print_r($arr1); //输出数组信息 ...