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 相关文章推荐
this和执行上下文实现代码
Jul 01 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
jquery队列函数用法实例
Dec 16 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
[原创]JQuery 在表单提交之前修改 提交的值
Apr 14 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
May 22 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
vue通过video.js解决m3u8视频播放格式的方法
Jul 30 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 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 foreach 参数强制类型转换的问题
2010/12/10 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
jQuery创建平滑的页面滚动(顶部或底部)
2013/02/26 Javascript
浅析jquery某一元素重复绑定的问题
2014/01/03 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
微信小程序之发送短信倒计时功能
2017/08/30 Javascript
js的函数的按值传递参数(实例讲解)
2017/11/16 Javascript
Promise.all中对于reject的处理方法
2018/08/01 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
vue实现登录页面的验证码以及验证过程解析(面向新手)
2019/08/02 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
NodeJs crypto加密制作token的实现代码
2019/11/15 NodeJs
Python守护进程用法实例分析
2015/06/04 Python
Python3计算三角形的面积代码
2017/12/18 Python
Python图像处理之识别图像中的文字(实例讲解)
2018/05/10 Python
python生成器与迭代器详解
2019/01/01 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
Otticanet英国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/02/10 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
大学生党课思想汇报
2013/12/29 职场文书
小学优秀教育工作者事迹材料
2014/05/09 职场文书
给校长的建议书300字
2014/05/16 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
应届生简历自我评价
2015/03/11 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Tomcat项目启动失败的原因和解决办法
2022/04/20 Servers
详解SQL报错盲注
2022/07/23 SQL Server