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 相关文章推荐
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 jQuery
jquery 键盘事件的使用方法详解
Sep 13 jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
基于jQuery ztree实现表格风格的树状结构
Aug 31 jQuery
JS/jQuery实现获取时间的方法及常用类完整示例
Mar 07 jQuery
解决JQuery的ajax函数执行失败alert函数弹框一闪而过问题
Apr 10 jQuery
jquery中为什么能用$操作
Jun 18 jQuery
jQuery 选择方法及$(this)用法实例分析
May 19 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
基于jquery实现彩色投票进度条代码解析
Aug 26 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 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
桌面中心(三)修改数据库
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php分页示例分享
2014/04/30 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
JavaScript 函数调用规则
2009/09/14 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
javascript+xml实现简单图片轮换(只支持IE)
2012/12/23 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
2014/03/22 Javascript
JS实现的左侧竖向滑动菜单效果代码
2015/10/19 Javascript
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
微信小程序picker组件下拉框选择input输入框的实例
2017/09/20 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
详解组件库的webpack构建速度优化
2018/06/18 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vuejs监听vuex中值的变化的方法示例
2018/12/02 Javascript
详解关于React-Router4.0跳转不置顶解决方案
2019/05/10 Javascript
layui的数据表格+springmvc实现搜索功能的例子
2019/09/28 Javascript
[10:04]国际邀请赛采访专栏:DK.Farseer,mouz.Black^,采访员Josh专访
2013/08/05 DOTA
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python实现PS滤镜特效之扇形变换效果示例
2018/01/26 Python
查看Django和flask版本的方法
2018/05/14 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
Python使用os.listdir和os.walk获取文件路径
2020/05/21 Python
PyQt5实现画布小程序
2020/05/30 Python
python -v 报错问题的解决方法
2020/09/15 Python
法人授权委托书
2014/09/16 职场文书
女性健康知识讲座通知
2015/04/23 职场文书
同学聚会祝酒词
2015/08/10 职场文书
Golang的继承模拟实例
2021/06/30 Golang
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis