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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
jQuery+ajax简单实现文件上传的方法
Jun 03 Javascript
深入理解jQuery 事件处理
Jun 14 Javascript
微信小程序 按钮滑动的实现方法
Sep 27 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
vue项目中axios使用详解
Feb 07 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
Vue.js 父子组件通信的十种方式
Oct 30 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
jquery插件实现代码雨特效
Apr 24 jQuery
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下删除一篇文章生成的多个静态页面
2010/08/08 PHP
让PHP COOKIE立即生效,不用刷新就可以使用
2011/03/09 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
php实现二进制和文本相互转换的方法
2015/04/18 PHP
javascript 有用的脚本函数
2009/05/07 Javascript
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
基于jQuery的试卷自动排版系统实现代码
2011/01/06 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
2015/10/16 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
Vue.js中extend选项和delimiters选项的比较
2017/07/17 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
2017/07/19 jQuery
[01:07:13]TNC vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[01:20:47]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第一场 1月19日
2021/03/11 DOTA
Python实现的HMacMD5加密算法示例
2018/04/03 Python
python实现决策树分类(2)
2018/08/30 Python
Pycharm2017版本设置启动时默认自动打开项目的方法
2018/10/29 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
python爬虫开发之使用python爬虫库requests,urllib与今日头条搜索功能爬取搜索内容实例
2020/03/10 Python
如何创建一个Flask项目并进行简单配置
2020/11/18 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
高性能装备提升营地:Kammok
2019/02/27 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
总裁岗位职责
2013/12/04 职场文书
中央空调节能方案
2014/06/15 职场文书
励志演讲稿600字
2014/08/21 职场文书
无犯罪记录证明
2014/09/19 职场文书
2015年宣传工作总结
2015/04/08 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis
MySQL添加索引特点及优化问题
2022/07/23 MySQL
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript