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的初始化最 ...
随机推荐
- 微信小程序IOS真机调试发生了SSL 错误，无法建立与该服务器的安全连接
小程序 真机调试 IOS request:fail 发生了SSL 错误,无法建立与该服务器的安全连接,解决方法服务器中打开Powerhell,执行以下代码,然后重启服务器 # Enables TLS ...
- oracle根据一张表更新另外一张表
知道是两张表进行更新,之前作过mysql的,直接就写了: update a,b set a.code = b.code wehre a.id = b.id 然后就报错了,上网查了下知道oracle不能 ...
- yii2.0 引入权限控制插件
权限控制:"mdmsoft/yii2-admin": "~2.0" 教程:http://www.cnblogs.com/zyf-zhaoyafei/p/5825 ...
- 010、Java中扩大数据类型
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- oracle通用帮助类
需要的dll( EntityFramework.6.0.0Oracle.ManagedDataAccess.12.1.2400System.Configuration.dllEmitMapper.1. ...
- netty权威指南学习笔记三——TCP粘包/拆包之粘包现象
TCP是个流协议,流没有一定界限.TCP底层不了解业务,他会根据TCP缓冲区的实际情况进行包划分,在业务上,一个业务完整的包,可能会被TCP底层拆分为多个包进行发送,也可能多个小包组合成一个大的数据包 ...
- 文本编辑器vim/vi——末行模式
指令格式: #vim 文件路径作用:打开指定的文件. 进入方式:由命令模式进入,按下“:”或者“/(表示查找)”即可进入 退出方式: a. 按下esc b. 连按2次esc键 c. 删除末行全部输入字 ...
- 【LeetCode 】验证回文串
[问题]给定一个字符串,验证它是否是回文串,只考虑字母和数字字符,可以忽略字母的大小写.说明:本题中,我们将空字符串定义为有效的回文串. 示例 : 输入: "A man, a plan, a ...
- iptable实现端口转发
利用iptables的规则来实现端口转发: 第一步需要将内核参数的net.ipv4.ip_forward=1 场景一:实现本地端口转发 本地端口转发实在PREROUTING链中将端口做NAT转换: # ...
- Photoshop 更换证件照底色
1.打开photoshop CS6. 2.打开照片 (上栏)文件---->打开 或者,直接把照片拖进ps中. 3.复制图层 右击背景,点击复制图层 (复制图层的作用是,如果对图层操作错误,可以 ...