带锁的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>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</li>
<li>
1
2
3
4
</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 ...

随机推荐

C#调用java类、jar包方法（转）
一.将已经编译后的java中Class文件进行打包:打包命令JAR 如:将某目录下的所有class文件夹全部进行打包处理: 使用的命令:jar cvf test.jar -C com/ . 其中tes ...
在virtualbox（win7）下使用USB摄像头
解决方法: 去https://www.virtualbox.org/wiki/Downloads下载VirtualBox 4.3.8 Oracle VM VirtualBox Extension Pa ...
2、SIP
1.初学者笔记:http://www.cnblogs.com/gnuhpc/archive/2012/01/16/2323637.html 2.SIP头字段解释:http://www.cnblogs. ...
安卓手机屏幕录像之scr
打开SCR Screen Recorder,屏幕会显示录像控制面板,点击“开始”按钮就可以开始录像: - 停止录像的方法有两种.一种是锁屏,锁屏后等待2秒,录像文件会自动保存到SD卡,另外一种是重新打 ...
后台数据库读取Html值到前台显示不了样式
@Html.Raw(FieldValue) 像一些Html代码传到前台编译不了,直接显示出来 FieldValue 是后台传过来的值 viewBag
20条Linux命令面试问答
程序师 http://www.techug.com/20-linux-command-interview-questions 问:1 如何查看当前的Linux服务器的运行级别? 答: ‘who -r ...
Asynchronous javascript and xml
关于Ajax,学习了原生的ajax和JQ的ajax,如今,它已是无处不在,首先,我们知道开发或者使用的软件分为c/s和b/s两种,分别是客户端/服务端和浏览器端/服务端. 前者的优点是响应速度快,但是 ...
Eclipse使用tomcat的原理
1. 当我们使用Eclipse将项目部署到Tomcat的时,我们发现,在Tomcat下的webapps目录下并没有我们创建好的项目,但是当通过Eclipse启动服务器后,项目却真的可以访问到,这是为什 ...
Sublime插件安装
来在Sublime text3上安装Package Control 使用Ctrl+`(ESC下边的那个~)快捷键或者通过View->Show Console菜单打开命令行,粘贴如下代码: imp ...
CA签发工具
#!/bin/bash #author Sun Ying #date:2015-12-17 if [ $# -lt 1 ];then echo -e "\033[34mUsage: `bas ...

带锁的3D切割轮播图

带锁的3D切割轮播图的更多相关文章

随机推荐

热门专题