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的初始化最 ...
随机推荐
- epoll源码分析(基于linux-5.1.4)
API epoll提供给用户进程的接口有如下四个,本文基于linux-5.1.4源码详细分析每个API具体做了啥工作,通过UML时序图理清内核内部的函数调用关系. int epoll_create1( ...
- jq插件和jq
封装一个jq (function(win) { var jQuery = function(selecter) { this.version = '1.0.1'; //版本号 this.selecte ...
- 如何拯救被Due逼疯的留学生们？
Final季又到了,还有多少paper,多少project没完成?每年一到这个时候,手忙脚乱赶各种进度就成了留学小伙伴们共同的日常.任务多,不知道从何开始,拖延,烦躁……到底该怎么办?小编今天为各位介 ...
- 前端 移动端H5页面 DEBUG
下载网址:https://github.com/Tencent/vConsole 把这个JS复制到项目里面 然后引入到HTML中 然后在JS上面实例化一下即可 页面就会有一个绿色的,然后点击一下就可以 ...
- mybatis插入数据后将其ID返回
背景 mybatis没有关联保存的功能,所以主从表需要分开保存,这就涉及到主表保存后要再次获取主表ID的环节,以下介绍mybatis插入数据后返回其自增ID的两种方式 方案 1.sql获取 <i ...
- P1052 卖个萌
P1052 卖个萌 转跳点:
- redmine处理规范
开发: 1. 研发人员负责更新到的状态共有三个: “进行中”. ”已解决”. ”需要反馈”. 2. 在开始修复bug的时候,把状态更新为”进行中”,把title更新 ...
- 在 Windows 系统上安装 Jekyll
目录 安装 Ruby 环境 用 Bundler 安装 Jekyll 本文是写给完全未用过 Ruby 乃至命令行工具者的.对于一般的开发者,Jekyll 官方文档的相关内容已然足够. 本文为钱院学辅技术 ...
- Spring-IOC（基于注解）
1.Spring 的 Bean 管理:(注解方式) 1.1 创建 web 项目,引入 Spring 的开发包: 注:在 Spring 的注解的 AOP 中需要引入 spring-aop 的 jar 包 ...
- Java对象序列化输入输出
在网上看到一篇有关于对象序列化的代码,自己仿着写了把 在Java中,entity通过implements Serializable,然后使用ObjectInputStream和ObjectOutput ...