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">&lt;</a>
<a href="javascript:;" class="next">&gt;</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切割轮播图的更多相关文章

  1. css3实现3D切割轮播图案例

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 案例:3D切割轮播图

    一.3d转换 3D旋转套路:顺着轴的正方向看,顺时针旋转是负角度,逆时针旋转是正角度 二.代码 <!DOCTYPE html> <html lang="en"&g ...

  3. 3D切割轮播图

    预览图: 实现原理:将图片切割构建一个和ul(电脑屏幕)同一个轴的立方体,利用延时旋转实现切割效果 知识点:transform-style属性(必须搭配transform属性使用) 值 描述 flat ...

  4. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  5. js访3d上下轮播图

    js/css访3d上下轮播图 (附件) <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  6. CSS3,3D效果轮播图

    ---恢复内容开始--- 大家还记得我昨天的3D拖拽立方体吗??我昨天还说过css还可以做轮播图,所以咱们今天就写一下,css的轮播图吧! ....这个轮播图主要是用CSS3里的transform的旋 ...

  7. transform—切割轮播图

    效果演示: 1.结构分析 第一步:在一个div里面有显示图片的ul标签(1个)和左右切换的a标签(2个): 第二步:ul标签中有5个li标签,li标签浮动,每个li标签的宽度占ul宽度的五分之一,高度 ...

  8. 78.3D立体轮播图（完整兼容手机端和pc端）

    效果呈现来源于http://www.jq22.com/demo/jR3DCarousel-master20160315/ 在此基础上改成需要的3个分类的3D图 由于原有的不支持粘贴复制显示3个分类 我 ...

  9. 3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）

    前不久我做了一个3d仿酷狗的轮播图,用的技术原理就是简单的jquery遍历+css样式读写. 这次呢,我们换一种思路(呵呵其实换汤不换药),看到上次那个轮播吗?你有没有发现用jquery的animat ...

随机推荐

  1. C#获取网页内容的三种方式

    C#通常有三种方法获取网页内容,使用WebClient.WebBrowser或者HttpWebRequest/HttpWebResponse... 方法一:使用WebClient (引用自:http: ...

  2. 一些常用的sql语句

    1.查询表里的null值:is null 和 is not null  select*from student where email is null       返回的该表里面邮箱为null的结果集 ...

  3. asp.net中插件开发模式说明

    第一定义接口 /// <summary>          /// 这是插件必须实现的接口,也是主程序与插件通信的唯一接口         /// 换句话说,主程序只认识插件里的这些方法  ...

  4. 小结一下：javascript 金额计算

    今天在项目中开发一个计算金额的功能,开始我是这样做的: eg: var amount += parseFloat( 0.01+0.02); 结果:0.0300000000000000001 为什么呢? ...

  5. 使用yum安装应用程序时候，报错：[Errno 14] PYCURL ERROR 7 - "Failed to connect to 2001:da8:8000:6023::230: 网络不可达"

    使用yum安装应用程序时候,报错:[Errno 14] PYCURL ERROR 7 - "Failed to connect to 2001:da8:8000:6023::230: 网络不 ...

  6. sybase ODBC驱动

    windows64位系统ODBC数据源管理器位置 64位 C:\Windows\System32\odbcad32.exe 32位 C:\Windows\SysWOW64\odbcad32.exe s ...

  7. 基本变换(读书笔记5 --- Real-Time rendering)

    刚体变换 即变换不改变了被变换顶点之间的距离,以及偏手性(不会让左右手坐标系颠倒). 下面的平移变换.旋转变换即属于刚体变换 平移 从一个位置变到另一个位置可以用平移矩阵T来表示,这个矩阵将一个实体变 ...

  8. public, protected and private inheritance in C++

    Get from Stackoverflow. The details can easily understand from the below example. class A { public: ...

  9. weedfs getsockopt: connection timed out

    启动master weed master -ip 10.191.197.133 -mdir /namenode -ip.bind 10.191.197.133 I0809 16:53:51 7721 ...

  10. ftp

    1.url的确定 string ftpServerIP = "29.184.249.98"; string path=new Uri("ftp://"+ftpS ...