javascript实现切割轮播效果
作者:Maybion 发布时间:2024-06-18 16:32:59
标签:js,切割轮播
本文实例为大家分享了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
0
投稿
猜你喜欢
- 最近在重构公司以前产品的前端代码,摈弃了以前的session-cookie鉴权方式,采用token鉴权,忙里偷闲觉得有必要对几种常见的鉴权方
- <%on error resume nextdim conn,sql,rsset conn=Server.CreateObject(&
- 灰度图像染成红色和黄色# 1.将灰度图像转换为RGB图像image = color.gray2rgb(grayscale_image)# 2
- K线数据提取依据原有数据集格式,按要求生成新表:1、每分钟的close数据的第一条、最后一条、最大值及最小值,2、每分钟vol数据的增长量(
- php 生成短网址 原理: 1.将原网址做crc32校验,得到校验码。 2.使用sprintf('%u') 将校验码转为无符
- 实现效果:通过url所绑定的关键名创建目录名,每次访问一个网页url后把文件下载下来代码:其中 data[i][0]、data[i][1]
- 本文实例讲述了Python注释、分支结构、循环结构、伪“选择结构”用法。分享给大家供大家参考,具体如下:注释:python使用#作为行注释符
- PyCharm就是Python语言开发中一个很受欢迎的IDE,界面类似于visual studio,android studio,集成的功能
- 引言 亚马逊网站相较于国内的购物网站,可以直接使用python的最基本的request
- pymysql写入中文直接写入中文会出现错误。根据网上的方法,设置my.ini不成功sql = "INSERT INTO comp
- python的代码错误检查通常用pep8、pylint和flake8,自动格式化代码通常用autopep8、yapf、black。这些工具均
- 目录1、字典的定义字典和列表的区别:字典的基本使用2、循环遍历3、字符串的定义4、字符串的常用操作字符串 查找和替换字符串 文本对齐演练去除
- 前言:array数组要转换成矩阵(matrix)数据类型才能进行一系列的线性运算。matrix类型也有时候要转换成array数组。代码:1.
- 前言相信对于每一个编程人员来说,在文本处理的时候,经常会遇到全角半角不一致的问题。于是需要程序能够快速的在两者之间互转。由于全角半角本身存在
- 借助map实现golang中没有set数据结构,一般是通过map实现,因为map的key值是不能重复的示例type empty struct
- selenuim模块定位方法1,我们想要操作html页面上的元素,首先必须要定位到这个元素上。每个元素都有他各自的属性,比如id,name,
- 在进行CSS网页布局的时候,我们经遇到刷新要保留表单里内容的时候,习惯的做法使用cookie,但是那样做实在是很麻烦,css中的behavi
- 在实际的项目中,能用别人写好的插件实现相关功能是最好不过,为了节约时间成本,因为有的项目比较紧急,没充分时间让你自己来写,即便写了,你还要花
- 本文实例讲述了Python基于Matplotlib库简单绘制折线图的方法。分享给大家供大家参考,具体如下:Matplotlib画折线图,有一
- 在制作登录页面时学习了TK弹窗的输入文本框的使用,下面让我们一起来学习一下TK弹窗中的输入框及文本框的使用方法吧!输入框要想制作一个输入弹窗