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 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
把input初始值不写value的具体实现方法
Jul 04 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
详解微信小程序——自定义圆形进度条
Dec 29 Javascript
Angular中响应式表单的三种更新值方法详析
Aug 22 Javascript
vue iview组件表格 render函数的使用方法详解
Mar 15 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
Layui给switch添加响应事件的例子
Sep 03 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
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一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
PHP array_push 数组函数
2009/12/26 PHP
php 定界符格式引起的错误
2011/05/24 PHP
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
2016/10/19 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
详解项目升级到vue-cli3的正确姿势
2019/01/28 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
create-react-app中添加less支持的实现
2019/11/15 Javascript
微信小程序入门之绘制时钟
2020/10/22 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python用GET方法上传文件
2015/03/10 Python
基于python框架Scrapy爬取自己的博客内容过程详解
2019/08/05 Python
python 列表、字典和集合的添加和删除操作
2019/12/16 Python
Python 模拟动态产生字母验证码图片功能
2019/12/24 Python
Pytorch实现各种2d卷积示例
2019/12/30 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
Python dict的常用方法示例代码
2020/06/23 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
J2EE面试题集锦(附答案)
2013/08/16 面试题
节能环保标语
2014/06/12 职场文书
活动简报范文
2015/07/22 职场文书
2015年高校保卫处工作总结
2015/07/23 职场文书