jQuery实现带3D切割效果的轮播图功能示例【附源码下载】


Posted in jQuery onApril 04, 2019

本文实例讲述了jQuery实现带3D切割效果的轮播图。分享给大家供大家参考,具体如下:

这是一个使用css3+jQuery实现的轮播图效果,以前还没接触css3时,觉得效果挺酷炫的,但是实现挺复杂的,今天研究了一下,发现特别简单,稍微动用一下空间想象力就好了,下面时效果图

jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

1.这是html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3D切割轮播图</title>
</head>
<body>
  <div class="box">
    <ul class="images-box">
	  //每个li由4个span组成,刚好组成正方体前、后、上、下 四个面,
      <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>
	//左右切换按钮
    <div>
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="left"><</a>
      <a href="javascript:;" rel="external nofollow" rel="external nofollow" class="right">></a>
    </div>
  </div>
  <script src="js/jquery-1.12.4.js"></script>
  <script src="js/index.js"></script>    
</body>
</html>

2.这是css代码

*{
      padding:0;
      margin: 0;
    }
    .box{
      width: 600px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 150px auto;
      position: relative;
    }
    .box .left,
    .box .right{
      position: absolute;
      top: 50%;
      width: 40px;
      height: 40px;
      line-height: 40px;
      margin-top: -20px;
      text-align: center;
      text-decoration:none;
      font-weight: bold;
      font-size: 40px;
      color: #ccc;
      background-color: rgba(255,255,255,.2);
    }
    .box .right{
      right: 0;
    }
    .images-box{
      width: 100%;
      height: 100%;
      list-style: none;
    }
    .images-box li {
      width: 120px;
      height: 100%;
      float: left;
      position: relative;
      /*使被转换的子元素保留其 3D 转换*/
      transform-style: preserve-3d;
      transition:all 6s; /*控制旋转时间*/
    }
    .images-box li span{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: url("images/1.jpg")no-repeat ;
    }
    /*拼接立体容器,每个面使用不同的背景图*/
    .box .images-box li span:nth-child(1){
      background-image: url("images/1.jpg");
      transform: translateZ(150px);
    }
    .box .images-box li span:nth-child(2){
      background-image: url("images/2.jpg");
      transform: rotateX(90deg) translateZ(150px);
    }
    .box .images-box li span:nth-child(3){
      background-image: url("images/3.jpg");
      transform: rotateX(180deg) translateZ(150px);
    }
    .box .images-box li span:nth-child(4){
      background-image: url("images/4.jpg");
      transform: rotateX(270deg) translateZ(150px);
    }

    /*拼接背景图*/
    .images-box li:nth-child(1) span{
      background-position: 0 0;
    }
    .images-box li:nth-child(2) span{
      background-position: -120px 0;
    }
    .images-box li:nth-child(3) span{
      background-position: -240px 0;
    }
    .images-box li:nth-child(4) span{
      background-position: -360px 0;
    }
    .images-box li:nth-child(5) span{
      background-position: -480px 0;
    }
3.这是js代码,这里用到jquery,需提前引入
$(function () {
      var index=0; //旋转角度记录
      var flag=true;
      $('.left').on('click',function () {
        if(!flag) return false;
        flag=false;
        index--;
        var angle=-index*90;
        $('.images-box li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {
          // 每个模块延时不同,即可看出切换3d效果
          $(this).css('transition-delay',i*0.25+'s');
        });
      });
      $('.right').on('click',function () {
        if(!flag) return false;
        flag=false;
        index++;
        var angle=-index*90;
        $('.images-box li').css('transform','rotateX('+angle+'deg)').each(function (i,item) {

          $(this).css('transition-delay',i*0.25+'s');
        });

      });
      //节流阀,防止连续、快速、多次点击
      $('li:last').on('transitionend',function () {
        flag=true;
      });
    })
  </script>

这是页面所用的图片

1.jpg

jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

2.jpg

jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

3.jpg

jQuery实现带3D切割效果的轮播图功能示例【附源码下载】

4.jpg

完整代码点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery设置图片等比例缩小的方法
Apr 29 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery操作之效果详解
May 19 jQuery
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
jQuery DOM节点的遍历方法小结
Aug 15 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 jQuery
jQuery中实现text()的方法
Apr 04 jQuery
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jquery简单实现纵向的无缝滚动代码实例
Apr 01 #jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 #jQuery
jQuery实现动态添加和删除input框代码实例
Mar 29 #jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 #jQuery
JQueryDOM之样式操作
Mar 27 #jQuery
浅谈JS和jQuery的区别
Mar 27 #jQuery
jQuery实现动态添加和删除input框实例代码
Mar 26 #jQuery
You might like
PHP实现简单数字分页效果
2015/07/26 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
PHP设计模式(六)桥连模式Bridge实例详解【结构型】
2020/05/02 PHP
js继承 Base类的源码解析
2008/12/30 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
Jquery工作常用实例 使用AJAX使网页进行异步更新
2011/07/26 Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
2013/04/26 Javascript
js文本框输入点回车触发确定兼容IE、FF等
2013/11/19 Javascript
jquery中的查找parents与closest方法之间的区别
2013/12/02 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jQuery实现复选框的全选和反选
2017/02/02 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
Python的time模块中的常用方法整理
2015/06/18 Python
python采用django框架实现支付宝即时到帐接口
2016/05/17 Python
python 写入csv乱码问题解决方法
2016/10/23 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
python opencv读mp4视频的实例
2018/12/07 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
简单了解Python3里的一些新特性
2019/07/13 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
团队会宣传标语
2014/10/09 职场文书
元旦晚会主持词开场白
2015/05/28 职场文书
高中家长意见怎么写
2015/06/03 职场文书
劳动模范获奖感言
2015/07/31 职场文书
小学校园广播稿
2015/08/18 职场文书
《花钟》教学反思
2016/02/17 职场文书
准备去美国留学,那么大学申请文书应该怎么写?
2019/08/12 职场文书
sql查询结果列拼接成逗号分隔的字符串方法
2021/05/25 SQL Server
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL
分析设计模式之模板方法Java实现
2021/06/23 Java/Android