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.masonry瀑布流效果
May 25 jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 jQuery
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
Jul 10 jQuery
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 jQuery
jQuery表单校验插件validator使用方法详解
Feb 18 jQuery
如何基于jQuery实现五角星评分
Sep 02 jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 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/05/18 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
javascript new一个对象的实质
2010/01/07 Javascript
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
2013/08/12 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
javascript实现2016新年版日历
2016/01/25 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
JS实现将链接生成二维码并转为图片的方法
2018/03/17 Javascript
vue 注册组件的使用详解
2018/05/05 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
jQuery实现图片切换效果
2020/10/19 jQuery
Python中使用logging模块代替print(logging简明指南)
2014/07/09 Python
简单的Python的curses库使用教程
2015/04/11 Python
安装dbus-python的简要教程
2015/05/05 Python
Python中splitlines()方法的使用简介
2015/05/20 Python
Python3读取Excel数据存入MySQL的方法
2018/05/04 Python
python 实现敏感词过滤的方法
2019/01/21 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
阳光体育:Sunny Sports(购买露营和远足设备)
2018/08/07 全球购物
什么是设计模式
2012/06/17 面试题
xxx同志考察材料
2014/02/07 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
“四风”查摆问题自我剖析材料
2014/09/27 职场文书
优秀教研组申报材料
2014/12/26 职场文书
工作会议简报
2015/07/20 职场文书
中秋节作文(五年级)之关于月亮
2019/09/11 职场文书
Python实现照片卡通化
2021/12/06 Python
Python的三个重要函数详解
2022/01/18 Python
python自动化测试之Selenium详解
2022/03/13 Python
APP界面设计技巧和注意事项
2022/04/29 杂记