JS+CSS实现3D切割轮播图


Posted in Javascript onMarch 21, 2020

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

第一步:我们首先要通过CSS来完成一个基本布局,利用 transform-style: preserve-3d设置成3D。

下面是CSS部分的代码

* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
li {
 list-style: none;
}
/* 轮播图 */
.homePage {
 width: 800px;
 height: 200px;
 margin: 150px auto;
 background-color: pink;
 position: relative;
 /* overflow: hidden; */
}

.homePage>ul {
 width: 100%;
 height: 100%;
}

.homePage>ul>li {
 width: 200px;
 height: 100%;
 float: left;
 transform-style: preserve-3d;
 position: relative;
 transition: all 1s;
}

.homePage>ul>li>span {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

.homePage>ul>li>span:nth-child(1) {
 background-image: url(../images/bxqy.jpg);
 transform: translateZ(100px);
}
.homePage>ul>li>span:nth-child(2) {
 background-image: url(../images/fczlm.jpg);
 transform: rotateX(90deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(3) {
 background-image: url(../images/hfh.jpg);
 transform: rotateX(180deg) translateZ(100px);
}
.homePage>ul>li>span:nth-child(4) {
 background-image: url(../images/ss.jpg);
 transform: rotateX(270deg) translateZ(100px);
}

/* 图片的定位 */
.homePage>ul>li:nth-child(2) span {
 background-position: -200px 0;
}
.homePage>ul>li:nth-child(3) span {
 background-position: -400px 0;
}
.homePage>ul>li:nth-child(4) span {
 background-position: -600px 0;
}

/* 小按钮 */
a {
 position: absolute;
 width: 30px;
 height: 70px;
 background-color: rgba(0,0,0,.2);
 text-decoration: none;
 color: #fff;
 top: 50%;
 margin-top: -35px;
 line-height: 70px;
 text-align: center;
 display: none;
}
.right {
 right: 0;
}

第二步:我们利用JS来调整图片运动时的切割速度以及方向。

下面是js的代码。

$(function(){
 var index = 0;
 var flag = true;
 var time = setInterval(move, 700);

 // 下一张
 function move(){
 if(!flag) return;
 flag = false;
 index++;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 }

 // 移入移出
 $(".homePage").mouseenter(function(){
 clearInterval(time);
 $(".homePage>a").css("display","block");
 })
 $(".homePage").mouseleave(function(){
 time = setInterval(move, 700);
 $(".homePage>a").css("display","none");
 })

 // 点击左边按钮:上一张
 $(".left").on("click",function(){
 if(!flag) return;
 flag = false;
 index--;
 $(".homePage>ul>li").css("transform","rotateX(" + (-90 * index) + "deg)").each(function(index,item){
  $(item).css("transition-delay",index * 0.2 + "s");
 });
 })

 // 点击有面按钮:下一张
 $(".right").click(move);

 // 动画整个过渡结束之后,transitionend过渡完成时触发
 $("li:last").on("transitionend",function(){
 flag = true;
 })
})

最后:body区域代码如下

<div class="homePage">
 <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>
 </ul>
 <a class="left" href="javascript:;" ><</a>
 <a class="right" href="javascript:;" >></a>
 </div>
 
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/demo.js"></script>

注意:要利用 overflow: hidden;来隐藏切割时超出的部分。最后3D切割轮播图就完成了。

精彩专题分享:jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

Javascript 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
js算法中的排序、数组去重详细概述
Oct 14 Javascript
js中一维数组和二位数组中的几个问题示例说明
Jul 17 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
12 种使用Vue 的最佳做法
Mar 30 Javascript
Vue.js中使用Vuex实现组件数据共享案例
Jul 31 Javascript
javascript实现扫雷简易版
Aug 18 Javascript
js+css3实现简单时钟特效
Sep 13 Javascript
vue-autoui自匹配webapi的UI控件的实现
Mar 20 #Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 #jQuery
微信小程序保持session会话的方法
Mar 20 #Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 #Javascript
js 闭包深入理解与实例分析
Mar 19 #Javascript
JS一次前端面试经历记录
Mar 19 #Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 #jQuery
You might like
Protoss热键控制
2020/03/14 星际争霸
PHP 删除一个目录及目录下的所有文件的函数代码
2010/05/26 PHP
PHP模拟QQ登录的方法
2015/07/29 PHP
ECSHOP在PHP5.5及高版本上报错的解决方法
2015/08/31 PHP
PHP简单实现无限级分类的方法
2016/05/13 PHP
php 文件下载 出现下载文件内容乱码损坏的解决方法(推荐)
2016/11/16 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
Javascript操纵Cookie实现购物车程序
2006/11/23 Javascript
基于jquery的二级联动菜单实现代码
2011/04/25 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
在JS中解析HTML字符串示例代码
2014/04/16 Javascript
js图片轮播特效代码分享
2015/09/07 Javascript
javascript字符串替换函数如何一次性全部替换掉
2015/10/30 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
vue component组件使用方法详解
2017/07/14 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
如何通过shell脚本自动生成vue文件详解
2019/09/10 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
详解Python计算机视觉 图像扭曲(仿射扭曲)
2019/03/27 Python
OpenCV3.0+Python3.6实现特定颜色的物体追踪
2019/07/23 Python
python urllib爬虫模块使用解析
2019/09/05 Python
详解Python time库的使用
2019/10/10 Python
python3.8 微信发送服务器监控报警消息代码实现
2019/11/05 Python
python中必要的名词解释
2019/11/20 Python
Django+Celery实现动态配置定时任务的方法示例
2020/05/26 Python
Django Admin 上传文件到七牛云的示例代码
2020/06/20 Python
OpenCV利用python来实现图像的直方图均衡化
2020/10/21 Python
css3绘制天猫logo实现代码
2012/11/06 HTML / CSS
黄色火烈鸟:De Gele Flamingo
2019/03/18 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
旷课检讨书3000字
2014/02/04 职场文书
小学社团活动总结
2014/06/27 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014年新教师工作总结
2014/11/08 职场文书
职称评定个人总结
2015/03/05 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS