javascript实现切割轮播效果
作者:Maybion 时间:2024-06-18 16:32:59
本文实例为大家分享了javascript实现切割轮播的具体代码,供大家参考,具体内容如下
效果
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.min.js"></script>
<style>
.container{
position: relative;
width: 560px;
height: 300px;
}
.container ul{
/*transform-style:preserve-3d;*/
/*transform: rotateX(-30deg) rotateY(21deg);*/
width: 560px;
height: 300px;
border:2px solid red;
list-style-type: none;
margin:0;
padding:0;
}
.container ul li{
position: relative;
float: left;
/*一张图分作5片,图的总宽度是560*/
width: 112px;
height: 300px;
transform-style:preserve-3d;
transition:all 0.5s;
}
.container ul li span{
position: absolute;
left:0;
top:0;
width: 100%;
height: 100%
}
/*以下4个选择器设定立体效果*/
.container ul li span:nth-child(1){
background: yellow;
transform:translateZ(150px);
}
.container ul li span:nth-child(2){
background: pink;
transform:translateY(-150px) rotateX(90deg);
}
.container ul li span:nth-child(3){
background: orange;
transform:translateZ(-150px) rotateX(180deg);
}
.container ul li span:nth-child(4){
background: blue;
transform:translateY(150px) rotateX(270deg);
}
/*//以下4个选择器设定第n个span的背景图*/
.container ul li span:nth-child(1){
background: url(images/1.jpg);
}
.container ul li span:nth-child(2){
background: url(images/2.jpg);
}
.container ul li span:nth-child(3){
background: url(images/3.jpg);
}
.container ul li span:nth-child(4){
background: url(images/4.jpg);
}
/*以下5个选择器用于设定第i个li的背景定位*/
.container ul li:nth-child(1) span{
background-position: 0px 0px;
}
.container ul li:nth-child(2) span{
background-position: -112px 0px;
}
.container ul li:nth-child(3) span{
background-position: -224px 0px;
}
.container ul li:nth-child(4) span{
background-position: -336px 0px;
}
.container ul li:nth-child(5) span{
background-position: -448px 0px;
}
/*.container ul li:nth-child(1) span:nth-child(1){
background: url(images/1.jpg) 0px 0px;
}
.container ul li:nth-child(2) span:nth-child(1){
background: url(images/1.jpg) -112px 0px;
}
.container ul li:nth-child(3) span:nth-child(1){
background: url(images/1.jpg) -224px 0px;
}
.container ul li:nth-child(4) span:nth-child(1){
background: url(images/1.jpg) -336px 0px;
}
.container ul li:nth-child(5) span:nth-child(1){
background: url(images/1.jpg) -448px 0px;
}
.container ul li:nth-child(1) span:nth-child(2){
background: url(images/2.jpg) 0px 0px;
}
.container ul li:nth-child(2) span:nth-child(2){
background: url(images/2.jpg) -112px 0px;
}*/
.container span.left, .container span.right{
position: absolute;
top:50%;
background: rgba(0,0,0,0.3);
width: 18px;
height: 40px;
font-size:25px;
font-weight: bold;
color:white;
text-align: center;
line-height: 40px;
cursor:pointer;
}
.container span.left{
left:0;
}
.container span.right{
right:0;
}
</style>
</head>
<body>
<div class="container">
<ul>
<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>
</li>
<li>
<span></span>
<span></span>
<span></span>
<span></span>
</li>
</ul>
<span class="left"><</span>
<span class="right">></span>
</div>
</body>
</html>
<script>
$(function(){
var allowClick = true;
var seq = 0; //代表初始的转动角度次数
//先给这5个li的动画效果设置不同的延时(delay)
//index表示循环中的索引号,item表示当前项(这里是li)
$("ul>li").each( function(index,item){
var delay_time = index*0.25;
$(item).css({"transition-delay": delay_time + "s"});
} );
//transitionend事件:动画结束事件
$("ul>li:last-child").on('transitionend',function(){
allowClick = true; //允许点击
});
//
$("span.left").on('click',function(){
//如果allowClick为false,表示此时还不允许点击,就直接退出
if(allowClick == false){ return ;}
allowClick = false; //如果可以继续下去,此时就会去执行动画,则此刻
//就必须讲这个allowClick设定为false
seq--;
var angle = -seq*90;
$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
});
$("span.right").on('click',function(){
//如果allowClick为false,表示此时还不允许点击,就直接退出
if(allowClick == false){ return ;}
allowClick = false;
seq++;
var angle = -seq*90;
$("ul>li").css({"transform":"rotateX(" + angle + "deg)"});
});
});
</script>
来源:https://blog.csdn.net/github_27314097/article/details/83018720
标签:js,切割轮播
0
投稿
猜你喜欢
OpenCV半小时掌握基本操作之边界填充
2022-07-15 15:10:33
详解Javascript 装载和执行
2024-04-18 09:41:02
java如何使用正则表达式限制特殊字符的个数
2023-07-25 08:53:50
python新手学习使用库
2021-06-20 13:08:38
python去除字符串中的空格、特殊字符和指定字符的三种方法
2022-06-12 20:21:31
Python读取txt内容写入xls格式excel中的方法
2023-08-31 22:29:17
vscode常用插件整理汇总
2023-11-21 10:48:59
MS SQL 查询数据在数据库中所在行
2009-04-26 19:36:00
Go方法接收者值接收者与指针接收者详解
2024-02-17 04:30:45
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2024-04-16 08:57:55
详解Visual Studio使用Git忽略不想上传到远程仓库的文件
2023-10-13 06:42:21
Python图像处理库PIL的ImageDraw模块介绍详解
2022-06-29 04:18:20
python标准库sys和OS的函数使用方法与实例详解
2022-06-24 20:22:42
Python+OpenCV实现相机标定的方法详解
2021-03-10 20:02:30
基于Python实现自动扫雷详解
2023-09-07 23:31:20
python修改操作系统时间的方法
2022-10-14 14:13:29
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2021-06-03 08:11:33
go Cobra命令行工具入门教程
2023-06-24 18:27:12
python中slice参数过长的处理方法及实例
2023-07-13 13:12:10
用ASP显示ACCESS数据库的GIF图象
2008-11-16 18:09:00