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加密密码到cookie的实现代码
Apr 18 jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
jQuery实现的弹幕效果完整实例
Sep 06 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
jQuery 选择器用法实例分析【prev + next】
May 22 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
php下清空字符串中的HTML标签的代码
2010/09/06 PHP
简单的PHP多图上传小程序代码
2011/07/17 PHP
解析CI即CodeIgniter框架在Nginx下的重写规则
2013/06/03 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
js自定义鼠标右键的实现原理及源码
2014/06/23 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
Node.js操作Firebird数据库教程
2016/03/04 Javascript
分类解析jQuery选择器
2016/11/23 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
React Native AsyncStorage本地存储工具类
2017/10/24 Javascript
JavaScript的Object.defineProperty详解
2018/07/09 Javascript
js调用设备摄像头的方法
2018/07/19 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
用Vue.js方法创建模板并使用多个模板合成
2019/06/28 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
python使用pymysql实现操作mysql
2016/09/13 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
Python递归实现打印多重列表代码
2020/02/27 Python
python文件读取失败怎么处理
2020/06/23 Python
迷你唐卡软皮鞋:Minnetonka Moccasin
2018/05/01 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2013/05/03 面试题
安全生产承诺书
2014/03/26 职场文书
数学系毕业生求职信
2014/05/29 职场文书
演讲比赛的活动方案
2014/08/28 职场文书
中学推普周活动总结
2015/05/07 职场文书
就业意向书范本
2015/05/11 职场文书
学生病假条范文
2015/08/17 职场文书
给学校的建议书400字
2015/09/14 职场文书
python文件与路径操作神器 pathlib
2022/04/01 Python
MySQL数据库简介与基本操作
2022/05/30 MySQL
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL