jQuery实现带三维(三维的缩写)切割效果的轮播图功能示例【附源码下载】

本文实例讲述了框架实现带三维(三维的缩写)切割效果的轮播图。分享给大家供大家参考，具体如下：

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

1.这是超文本标记语言代码

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title 3d切割轮播图/title/head body div class=' box ' ul class=' images-box '//每个里由四个跨度组成，刚好组成正方体前、后、上、下四个面/Li跨度/跨度跨度/跨度/跨度/Li跨度/跨度/跨度/跨度/跨度/Li跨度/跨度/跨度/跨度/Li跨度/跨度/跨度/跨度/跨度/Li跨度/跨度/跨度/跨度/跨度/跨度/跨度/Li/ul/左右切换按钮div a href=' JavaScript : rel=' external no follow ' rel=' external no follow ' class=' left '/a href=' JavaScript :rel='外部无跟随' rel='外部无跟随' class=' right '/a/div/div脚本src=' http : js/jquery-1。12 .4 .js '/script script src=' http : js/index。js '/脚本/正文/html 2 .这是钢性铸铁代码

* { padd :0 margin : 0；} .盒子{宽度： 600像素重量： 300像素边界： 1像素固体# cccmargin: 150px自动；相对位置：} .盒子。向左，向右。盒子。右侧{位置：绝对；前：名50%；宽度： 40px高度： 40px线高： 40px边距-top :-20px；文本对齐：中心；文本装饰：无；字体粗细：粗体；font-size : 40pxcolor: # ccc背景-color: rgba(255，255，255，2);} .盒子。右{右： 0；} .图像-盒子{宽度： 100%；高度： 100%;列表样式：无；} .图片-李盒子{宽度： 120 px高度： 100%;向左浮动：相对位置：/*使被转换的子元素保留其三维(三维的缩写)转换*/transform-style : preserve-3d；transit : all 6s/*控制旋转时间*/} .图像-方框里跨度{宽度： 100%;高度： 100%;绝对位置：top : 0；左： 0；背景： URL(' images/1。jpg’)无重复；} /*拼接立体容器，每个面使用不同的背景图*/.盒子图片-框李span : th-child(1){ background-image : URL(' images/1。jpg’)；transform : translateZ(150 px)；} .盒子图片-框李span : th-child(2){背景-图片： URL(' images/2。jpg’)；变换：旋转(90度)平移(150像素)；} .盒子图片-框李span : th-child(3){ background-image : URL(' images/3。jpg’)；变换：旋转(180度)平移(150像素)；} .盒子图片-框李span : th-child(4){ background-image : URL(' images/4。jpg’)；变换：旋转(270度)平移(150像素)；} /*拼接背景图*/.images-box li: th-child(1)span { background-position : 0；} .images-box li: th-child(2)span { background-position :-120 px 0；} .images-box li: th-child(3)span { background-position :-240 px 0；} .images-box li: th-child(4)span { background-position :-360 px 0；} .images-box li: th-child(5)span {背景-位置：-480 px 0；}3.这是射流研究…代码，这里用到jquery，需提前引入$(function(){ var index=0；//旋转角度记录定义变量标志=真；$('.左')。on('click '，function () { if(！标志)返回falseflag=false索引-;var angle=-index * 90；$('.图像-方框李' .css('transform '，' rotateX(' angle 'deg ').每个（函数(一，项目){ //每个模块延时不同，即可看出切换三维(三维的缩写)效果$(这个)。' CSS('转换-延迟，I * 0.25’；});});$('.右')。on('click '，function () { if(！标志)返回falseflag=false指数；var angle=-index * 90；$('.图像-方框李' .css('transform '，' rotateX(' angle 'deg ').每个（函数(一、项){ $(本)).' CSS('转换-延迟，I * 0.25’；});});//节流阀，防止连续、快速、多次点击$('li:last ').on('transitionend '，function(){ flag=true；});})/脚本这是页面所用的图片

1.jpg

2.jpg

3.jpg

4.jpg

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

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery图片操作技巧大全》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery切换特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常用插件及用法总结》 、 《jQuery常见经典特效汇总》 及《jquery选择器用法总结》

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