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 相关文章推荐
在VS2008中使用jQuery智能感应的方法
Dec 30 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
Apr 14 Javascript
javascript进行四舍五入方法汇总
Dec 16 Javascript
Js为表单动态添加节点内容的方法
Feb 10 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
Aug 24 Javascript
BootStrap的两种模态框方式
May 10 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
Feb 22 Javascript
vue路由守卫+登录态管理实例分析
May 21 Javascript
jQuery实现简单聊天室
Feb 08 jQuery
如何使JavaScript休眠或等待
Apr 27 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仿ZOL分页类代码
2008/10/02 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
Symfony生成二维码的方法
2016/02/04 PHP
PHP实现的基于单向链表解决约瑟夫环问题示例
2017/09/30 PHP
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
仿百度联盟对联广告实现代码
2014/08/30 Javascript
jQuery通过点击行来删除HTML表格行的实现示例
2014/09/10 Javascript
Javascript的动态增加类的实现方法
2016/10/20 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
JavaScript实现秒杀时钟倒计时
2019/09/29 Javascript
原生js+canvas实现验证码
2020/11/29 Javascript
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
pandas带有重复索引操作方法
2018/06/08 Python
对于Python深浅拷贝的理解
2019/07/29 Python
解决Pycharm 包已经下载,但是运行代码提示找不到模块的问题
2019/08/31 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
在Ubuntu 20.04中安装Pycharm 2020.1的图文教程
2020/04/30 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
职务说明书范文
2014/05/07 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
开工仪式策划方案
2014/05/23 职场文书
文秘自荐信
2014/06/28 职场文书
员工辞职信范文
2015/03/02 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Python 如何实现文件自动去重
2021/06/02 Python
Python制作表白爱心合集
2022/01/22 Python
Zabbix对Kafka topic积压数据监控的解决方案
2022/07/07 Servers
SpringBoot详解自定义Stater的应用
2022/07/15 Java/Android