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实现选中行变色效果(实例讲解)
Jul 06 jQuery
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
jQuery实现的中英文切换功能示例
Jan 11 jQuery
jquery将json转为数据字典的实例代码
Oct 11 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery实现上传文件进度条
Mar 26 jQuery
jQuery实现朋友圈查看图片
Sep 11 jQuery
jQuery treeview树形结构应用
Mar 24 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 Sql Server连接失败问题及解决办法
2009/08/07 PHP
php 使用post,get的一种简洁方式
2010/04/25 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php实现遍历多维数组的方法
2015/11/25 PHP
Thinkphp框架 表单自动验证登录注册 ajax自动验证登录注册
2016/12/27 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
IE与firefox之jquery用法区别
2008/10/03 Javascript
jQuery实现的Div窗口震动效果实例
2015/08/07 Javascript
jQuery实现默认是闭合的FAQ展开效果菜单
2015/09/14 Javascript
15个常用的jquery代码片段
2015/12/19 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
2016/12/02 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
一秒学会微信小程序制作table表格
2019/02/14 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
2019/02/18 jQuery
layui在form表单页面通过Validform加入简单验证的方法
2019/09/06 Javascript
vue路由权限校验功能的实现代码
2020/06/07 Javascript
简单了解前端渐进式框架VUE
2020/07/20 Javascript
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python简单实现获取当前时间
2016/08/27 Python
基于Linux系统中python matplotlib画图的中文显示问题的解决方法
2017/06/15 Python
初探TensorFLow从文件读取图片的四种方式
2018/02/06 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python实现Flappy Bird源码
2018/12/24 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
adidas美国官网:adidas US
2016/09/21 全球购物
美国最便宜的旅游网站:CheapTickets
2017/07/09 全球购物
警校毕业生自我评价
2014/04/06 职场文书
班委竞选演讲稿
2014/04/28 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
个人年终总结怎么写
2015/03/09 职场文书
工作态度怎么写
2015/06/25 职场文书
安全生产培训心得体会
2016/01/18 职场文书