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的初始化最 ...
随机推荐
- Unix-Time
1. Unix_time 2. Year_2000_problem 3. Year_10,000_problem 4. Year_2038_problem 5. Time_formatting_and ...
- wdcp升级php5.8到php7.1.12
php7升级脚本 update_php7.sh #!/bin/bash # PHP update scripts ];then Ver= else Ver=$ fi Debugfile= echo & ...
- System.Reflection.ReflectionTypeLoadException
引用了一个第三方dll, 此dll经过混淆,但是未签名. 然后,主程序无法反射了, 取消主程序的签名后正常反射.
- 你从未见过的Case Study写作指南
Case Study,意为案例分析,Case Study与其它的留学论文作业最大的的差别就在于Case Study在论文开始就需要明确给出论,然后再阐述这个结论的论证依据和理由.留学生们需要知道的是C ...
- ConfigureDefender – Windows Defender 设置工具
用于配置Windows 10内置Defender防病毒设置的实用程序.它是一个便携式实用程序 ConfigureDefender实用程序是一个GUI应用程序,用于在Windows 10上查看和配置重要 ...
- mqtt已断开连接(32109)
在rabbitmq下使用mqtt协议时,如果服务质量(qos)设置为2,在发布服务时会出现[已断开连接 (32109) - java.io.EOFException]的报错. 出现该报错的其他情况还有 ...
- HTML的文档结构与语法（一）
一.走进Web开发 Web运行的原理: 二.HTML 1.1什么是html HTML是用来描述网页的一种语言 HTML指的是超文本标记语言(Hyper Text Markup Language) 超文 ...
- C++编程学习（十）引用
引用变量是一个别名,也就是说,它是某个已存在变量的另一个名字.一旦把引用初始化为某个变量,就可以使用该引用名称或变量名称来指向变量. 注意以下几点与指针的区别: 不存在空引用.引用必须连接到一块合法的 ...
- InvalidOperationException: Cannot create a DbSet for 'IdentityUserClaim<string>' because this type is not included in the model for the context.
An unhandled exception occurred while processing the request. InvalidOperationException: Cannot crea ...
- 139-PHP static后期静态绑定（二）
<?php class test{ //创建test类 public function __construct(){ static::getinfo(); //后期静态绑定 } public s ...