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 相关文章推荐
一个可以兼容IE FF的加为首页与加入收藏实现代码
Nov 02 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
node.js中的fs.appendFileSync方法使用说明
Dec 17 Javascript
javascript面向对象之访问对象属性的两种方式分析
Jan 13 Javascript
jquery实现下拉框功能效果【实例代码】
May 06 Javascript
Angularjs中的事件广播 —全面解析$broadcast,$emit,$on
May 17 Javascript
微信小程序 教程之WXSS
Oct 18 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
Feb 15 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
angular4自定义表单控件[(ngModel)]的实现
Nov 23 Javascript
js实现登录拖拽窗口
Feb 10 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
PHP新手上路(四)
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
PHP用mysql_insert_id()函数获得刚插入数据或当前发布文章的ID
2016/11/25 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
用Mootools获得操作索引的两种方法分享
2011/12/12 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
JavaScript中原型链存在的问题解析
2016/09/25 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Vue.js实现模拟微信朋友圈开发demo
2017/04/20 Javascript
React利用插件和不用插件实现双向绑定的方法详解
2017/07/03 Javascript
使用react实现手机号的数据同步显示功能的示例代码
2018/04/03 Javascript
NodeJS 实现多语言的示例代码
2018/09/11 NodeJs
javascript中call()、apply()的区别
2019/03/21 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
[03:37]2014DOTA2国际邀请赛 主赛事第一日胜者组TOPPLAY
2014/07/19 DOTA
Python数组条件过滤filter函数使用示例
2014/07/22 Python
在Python中使用__slots__方法的详细教程
2015/04/28 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
python3.6.3转化为win-exe文件发布的方法
2018/10/31 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
详解H5 活动页之移动端 REM 布局适配方法
2017/12/07 HTML / CSS
Myprotein中国网站:欧洲畅销运动营养品牌
2021/02/11 全球购物
函授毕业生自我鉴定
2013/11/06 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
体育老师的教学自我评价分享
2013/11/19 职场文书
白酒市场开发计划书
2014/01/09 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers