带锁的3D切割轮播图
3D切割轮播图。 加入锁，限制点击太快次数
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
.view{
width: 560px;
height: 300px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
}
ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
width: 112px;
height: 300px;
float: left;
position: relative;
line-height: 300px;
text-align: center;
transform-style: preserve-3d;
transition: all 1s;
}
li span{
position: absolute;
top:0;
left:0;
width: 100%;
font-size: 40px;
}
li span:nth-child(1){
transform: translateZ(150px);
/*background-color: palegoldenrod;*/
background: url("./images/1.jpg") no-repeat;
}
li span:nth-child(2){
transform: translateY(-150px) rotateX(90deg);
/*background-color: paleturquoise;*/
background: url("./images/2.jpg") no-repeat;
}
li span:nth-child(3){
transform: translateZ(-150px) rotateX(180deg);
background: url("./images/3.jpg") no-repeat;
/*background-color: papayawhip;*/
}
li span:nth-child(4){
transform: translateY(150px) rotateX(270deg);
background: url("./images/4.jpg") no-repeat;
/*background-color: peru;*/
}
li:nth-child(2) span{
background-position: -112px;
}
li:nth-child(3) span{
background-position: -224px;
}
li:nth-child(4) span {
background-position: -336px;
}
li:nth-child(5) span{
background-position: -448px;
}
/*按钮*/
.prev, .next {
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
margin-top: -30px;
font-size: 40px;
color: #FFF;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
}
.next {
right: 0;
}
</style>
</head>
<body>
<div class="view">
<ul>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
<li>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</li>
</ul>
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
<script src="./js/jquery.min.js"></script>
<script>
var flag=false;
var current=0;
$(".prev,.next").on("click",function (){
if(flag){
return;
}
flag=true;
if($(this).hasClass("prev")){
current++;
//干掉其他的Li
$("li").css("transform","rotateX("+(current*90)+"deg)");
$("li").each(function (e){
// console.log(e);
$(this).css("transition-delay",(e*0.25)+"s");
})
}else{
current--;
$("li").css("transform","rotateX("+(current*90)+"deg)");
$("li").each(function (e){
// console.log(e);
$(this).css("transition-delay",(e*0.25)+"s");
})
}
});
$("li:nth-last-child(1)").on("webkitTransitionEnd",function (){
// console.log(1);
flag=false;
});
</script>
</div>
</body>
</html>
带锁的3D切割轮播图的更多相关文章
- css3实现3D切割轮播图案例
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 案例:3D切割轮播图
一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...
- 3D切割轮播图
预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...
- CSS3+JS切割轮播图
以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...
- js访3d上下轮播图
js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...
- CSS3,3D效果轮播图
---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...
- transform—切割轮播图
效果演示: 1.结构分析 第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...
- 78.3D立体轮播图（完整兼容手机端和pc端）
效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/ 在此基础上改成需要的3个分类的3D图 由于原有的不支持粘贴复制显示3个分类 我 ...
- 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）
前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...
随机推荐
- AutoCAD系统变量一览表
p.MsoNormal,li.MsoNormal,div.MsoNormal { margin: 0cm; margin-bottom: .0001pt; text-align: justify; t ...
- 【转载】Understand the serialVersionUID
If you have ever implemented Serializable interface, you must encounter this warning message The ser ...
- selenium 介绍1
本文主要是吸收这些帖子的营养,多谢互联网,和未知名作者. http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2011/1009/203318.h ...
- Python-8 元组tuple
#1 特殊的列表:元组 元组中的元素不可改变 #2 创建.访问 >>> tuple1=(1,2,3) >>> tuple1=1,2,3 >>> t ...
- Python体验(09)-图形界面之Pannel和Sizer
import wx class Form(wx.Frame): def __init__(self,parent,ID,title): wx.Frame.__init__(self,parent,ID ...
- 第一章 Andorid系统移植与驱动开发概述 - 读书笔记
Android驱动月考1 第一章 Andorid系统移植与驱动开发概述 - 读书笔记 1.Android系统的架构: (1)Linux内核,Android是基于Linux内核的操作系统,并且开源,所以 ...
- 如何将App程序发布到App Store？
见链接:http://my.oschina.net/u/1245365/blog/201920
- nodejs——qureystring的作用
当node服务器向另一个服务器发送数据时,首先要转换成字符串再post或者get,这个时候就要用到node内置的这个包querystring, querystring.stringify(data);
- 通过Robocopy+DOS 命令+Windows排程实现自动备份(将特定文件/目录备份至自动创建的以年月日命名的目标目录)
1. Software Requirement: 1.1.mirror.bat .mirror_SERVICE_BEGIN.mirror_SERVICE_END.robocopy.exe 1.2. C ...
- Could not parse mapping document from input stream hibernate配置异常
十二月 , :: 下午 org.apache.catalina.core.StandardContext listenerStart SEVERE: Exception sending context ...