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#正则表达式Regex类的用法

    C#正则表达式Regex类的用法 更多2014/2/18 来源:C#学习浏览量:36891 学习标签: 正则表达式 Regex 本文导读:正则表达式的本质是使用一系列特殊字符模式,来表示某一类字符串, ...

  2. CentOS 6.5安装Oracle 11.2.0.4------CentOS 6.5安装

    规划: IP:192.168.213.199 mask: 255.255.255.0 gateway:192.168.213.1 DNS1:202.101.172.35 磁盘分区: 磁盘总大小:25G ...

  3. C# 打开指定目录并定位到文件

    private void OpenFolderAndSelectFile(String fileFullName) { System.Diagnostics.ProcessStartInfo psi ...

  4. ORA-12520：TNS:监听程序无法为请求的服务器类型找到可用的处理程序

    连接数太多 关掉没用的 plsql

  5. TreeMap

    TreeMap的put() ,remove() ,containsKey(), get() 全都尊重compareTo() 或者 compare() 是否返回0的结果 如果compareTo() 或者 ...

  6. 用：before ：after 来写一些小特效

    提起:before :after首先想到的是 —— 用它来去浮动来我们来换个方式玩接下来展示三种用:before :after来实现的特效 希望能起到抛砖引玉的作用 <一>第一种就是常见的 ...

  7. 解决UITableView上计时器（Timer）的滑动问题

    要想计时器(Timer)不因UITableView的滑动而停止工作,就得探讨一下RunLoop了. RunLoop本质和它的意思一样是运行着的循环,更确切的说是线程中的循环.它用来接受循环中的事件和安 ...

  8. IT行业找工作难

    1.面试官主要看年龄,年龄小,技术再牛也不给你面试机会. 2.现在培训机构太多了,不管多大岁数的人看见这行业赚钱就立刻辞职去培训. 3.刚培训出来的能找到2w!!有的老板面试只看工作经验,不管之前干什 ...

  9. 泛型（Generic）

    本质:限制集合类型 我们在编写泛化类的时候,我们要时刻提醒自己,我们传入的参数T仅仅是一个Object类型,任何具体类型信息我们都是未知的. 小例子: package day02.generic; i ...

  10. NSQ的消息订阅发布测试

    在测试NSQ的Quick Start发现这样一个问题,就是同时只能有一个订阅实例 $ nsq_to_file --topic=test --output- 当存在两个实例时则消息会被发送给其中的一个实 ...