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的初始化最 ...
随机推荐
- Redis原理详解
Redis原理详解 数据类型 Redis最为常用的数据类型主要有以下五种: String Hash List Set Sorted set 在具体描述这几种数据类型之前,我们先通过一张图了解下Redi ...
- 完整版excel上传导入读写批量数据并将反馈结果写入远程exel中
思路:excel的读写借助于poi框架,在写入远程的时候,是不能直接写入的,本博主将传入的文件再次拉下来写到项目临时文件中,然后,在临时文件中写入,然后,以同样的名称路径覆盖掉远程的就可以了,稍微有点 ...
- s5pc100开发板网卡驱动的移植
相关软件下载地址:http://pan.baidu.com/s/16yo8Y fsc100开发板 交叉编译工具:arm-cortex_a8-linux-gnueabi-gcc 平台代码修改 vim ...
- maven-本地安装jar包
maven 安装本地jar包,通过install插件的install-file mojo进行工作,具体可通过如下命令进行查看 mvn help:describe -Dplugin=install -D ...
- vim 好用的插件
1 切换文件 使用buffer 这里可以安装一个 minibufExplorer https://github.com/huanglongchao/minibufexpl.vim 2 在项 ...
- Swift 访问权限
internal 内部的 1.默认情况下所有的类&属性&方法的访问权限都是internal 2.在本模块(项目/包/target)中可以访问 private 私有的 1.只有在本类中访 ...
- Java的Regex --正则表达式
一.概述 正则表达式通常被用来对字符串提供范围性的校验.替换那些符合某个模式(规则)的文本. 正则表达式所对应的类Pattern,所有的正则表达式都是在这个类下创建的.Pattern类用于创建一个正则 ...
- String的Split使用方法（以特定字符分隔，提取所需信息）
此处复制一串以空格分隔的数字,提取数字进行排序 int[] a = new int[10]; string input = Console.ReadLine();//获取用户输入的字符串 char[] ...
- UVA - 1262 Password（密码）（暴力枚举）
题意:给两个6行5列的字母矩阵,找出满足如下条件的“密码”:密码中的每个字母在两个矩阵的对应列中均出现.给定k(1<=k<=7777),你的任务是找出字典序第k小的密码.如果不存在,输出N ...
- Java进阶之路 - 1.走近Java
Java进阶之路 - 1.走近Java 一.走近Java思维导图