javascript实现切割轮播效果


Posted in Javascript onNovember 28, 2019

本文实例为大家分享了javascript实现切割轮播的具体代码,供大家参考,具体内容如下

效果

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浅谈javascript中的作用域
Apr 07 Javascript
jQuery Tools Dateinput使用介绍
Jul 14 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
在iframe中使bootstrap的模态框在父页面弹出问题
Aug 07 Javascript
通俗易懂地解释JS中的闭包
Oct 23 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
Sep 29 Javascript
Antd下拉选择,自动匹配功能的实现
Oct 24 Javascript
vue移动端下拉刷新和上滑加载
Oct 27 Javascript
JavaScript实现缓动动画
Nov 25 Javascript
javascript实现商品图片放大镜
Nov 28 #Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 #Javascript
javascript实现弹幕墙效果
Nov 28 #Javascript
jquery实现直播弹幕效果
Nov 28 #jQuery
jQuery实现简单弹幕效果
Nov 28 #jQuery
微信小程序事件流原理解析
Nov 27 #Javascript
JS实现简单省市二级联动
Nov 27 #Javascript
You might like
PHP伪静态写法附代码
2008/06/20 PHP
在WAMP环境下搭建ZendDebugger php调试工具的方法
2011/07/18 PHP
PHP取二进制文件头快速判断文件类型的实现代码
2013/08/05 PHP
浅谈php中变量的数据类型判断函数
2017/03/04 PHP
php app支付宝回调(异步通知)详解
2018/07/25 PHP
PHP实现长轮询消息实时推送功能代码实例讲解
2021/02/26 PHP
SlideView 图片滑动(扩展/收缩)展示效果
2010/08/01 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
NodeJs中的非阻塞方法介绍
2012/06/05 NodeJs
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
分享使用AngularJS创建应用的5个框架
2015/12/05 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JavaScript直播评论发弹幕切图功能点集合效果代码
2016/06/26 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
2016/08/04 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
JS实现动态修改table及合并单元格的方法示例
2017/02/20 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
2018/09/05 Javascript
vue+element-ui实现表格编辑的三种实现方式
2018/10/31 Javascript
layer.open 获取不到表单信息的解决方法
2019/09/26 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
Python中的面向对象编程详解(上)
2015/04/13 Python
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
关于pycharm 切换 python3.9 报错 ‘HTMLParser‘ object has no attribute ‘unescape‘ 的问题
2020/11/24 Python
CSS3 实现雷达扫描图的示例代码
2020/09/21 HTML / CSS
html5使用Canvas绘图的使用方法
2017/11/21 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
乡镇个人对照检查材料
2014/08/22 职场文书
大学宣传委员竞选稿
2015/11/19 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
SQLServer RANK() 排名函数的使用
2022/03/23 SQL Server