前不久我做了一个3d仿酷狗的轮播图，用的技术原理就是简单的jquery遍历+css样式读写。

这次呢，我们换一种思路（呵呵其实换汤不换药），看到上次那个轮播吗？你有没有发现用jquery的animate来写的话（酷狗那轮播样式6个其实还好），如果很多的话呢？会怎样，是不是得写一大坨？这显然不是我们想要的，那怎么办呢？其实既然是样式嘛，那我们就可以封成一个css类，一个类名，我们动态的把这些类名给添加给对应的位置即可，代码简单很多。先上一个gif吧。

单纯的不用js的h5+css3也是可以有很强大的动画效果，不过单纯的h5+c3缺少行为交互层，还是比较推荐用js，代码也比较少！

这个gif不会弄。随便弄了个（不好看这不是重点）。

咱先来对比下封成类名和一个个样式来设置两者的优劣：

之前遍历样式的代码是这样的：

设置成类名后的遍历是这样的：

如果js的样式有很多种，不仅仅是上面6种的话，你会发现这些样式跟你看一串json数据没区别了，你会很累（当然这仅仅是夸张说法），代码也是一大坨，嗯对，就是一大坨，你能忍么？反正我不能忍。js的函数式编程一直与优雅不沾边，当然后续的ES6和ES7，特别是模块化思想的引入，其实整体上好很多了，以后我们也是可以优雅而又严谨的写代码= =

同样的还是上一下demo吧：

html+js

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>名师风采</title>

     <link rel="stylesheet" href="css/dc-carousel.css">

     <script src="js/jquery-3.1.1.min.js"></script>

     <script>

         $(function(){

             var $dc_img=$('.dc_carousel_img li');

             var $dc_point=$('.dc_carousel_point li');

             var $dc_left=$('.previous');

             var $dc_right=$('.next');

             var nowTime=0,index=0,my;

             function dc_list(i){

                 $dc_point.eq(i).addClass("current_point").siblings().removeClass('current_point');

             }

             var dc_class=[];

             //动态修正class

             function slide(flag){

                 $dc_img.each(function(i){

                     dc_class[i]=$(this).attr("class");

                 });

                 console.log(dc_class);

                 $dc_img.each(function(i){

                     console.log($(this).attr("class"));

                     if(flag){

                         var a=i+1;

                         a%=$dc_img.length;

                     }

                     else{

                         var a=i-1;

                         a<0?a=$dc_img.length-1:a;

                     }

                     $(this).css("transition","").removeClass();

                     if(dc_class[a]!="others"){

 //                    &&dc_class[a-1]!="others"

                         $(this).css("transition","0.5s");

                     }

                     $(this).addClass(dc_class[a]);

                 })

             }

             //左右变动函数

             function dc_leftImg(){

                 if(new Date()-nowTime>500){

                     nowTime=new Date();

                     index--;

                     index<0?index=$dc_point.length-1:index;

                     dc_list(index);

                     slide(false);

                 }

             }

             function dc_rightImg(){

                 if(new Date()-nowTime>500){

                     nowTime=new Date();

                     index++;

                     index=index%$dc_point.length;

                     dc_list(index);

                     slide(true);

                 }

             }

             //左右按钮点击函数

             $dc_left.click(function(){

                 dc_leftImg();

                 autoPlay(false);

             });

             $dc_right.click(function(){

                 dc_rightImg();

                 autoPlay(true);

             });

             /**

              * 自动播放函数

              * */

             var time;

             function autoPlay(flag){

                 clearInterval(time);

                 if(flag){

                     time=setInterval(dc_rightImg,2000);

                 }

                 else{

                     time=setInterval(dc_leftImg,2000);

                 }

                 my=autoPlay.arguments[0];

             }

             autoPlay(true);

             $dc_img.mouseover(function(){

                 clearInterval(time);

                 console.log($(this));

             });

             $dc_img.mouseout(function(){

                 autoPlay(my);

             });

         })

     </script>

 </head>

 <body>

 <div class="box">

     <div class="dc_carousel" id="dc_carousel">

         <div class="dc_carousel_img">

             <ul>

                 <li class="first"><a href="javascript:;"><img src="data:images/teacher1.jpg" alt=""></a></li>

                 <li class="second"><a href="javascript:;"><img src="data:images/teacher2.jpg" alt=""></a></li>

                 <li class="third"><a href="javascript:;"><img src="data:images/teacher3.jpg" alt=""></a></li>

                 <li class="others"><a href="javascript:;"><img src="data:images/teacher4.jpg" alt=""></a></li>

                 <li class="others"><a href="javascript:;"><img src="data:images/teacher7.jpg" alt=""></a></li>

                 <li class="others"><a href="javascript:;"><img src="data:images/teacher8.jpg" alt=""></a></li>

                 <li class="others"><a href="javascript:;"><img src="data:images/teacher9.jpg" alt=""></a></li>

                 <li class="last_second"><a href="javascript:;"><img src="data:images/teacher5.jpg" alt=""></a></li>

                 <li class="last"><a href="javascript:;"><img src="data:images/teacher6.jpg" alt=""></a></li>

             </ul>

         </div>

         <div class="dc_carousel_point">

             <ul>

                 <li class="current_point"></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

                 <li></li>

             </ul>

         </div>

         <span class="previous dc_left"><img src="data:images/left.png" alt=""></span>

         <span class="next dc_right"><img src="data:images/right.png" alt=""></span>

     </div>

 </div>

 </body>

 </html>

css

html,body,div,ol,ul,li,p,h1,h2,h3,h4,h5,h6,table,dt,dd,span,input,img{margin:;padding:}ul,li{list-style:none}a{text-decoration:none}.dc_left{float:left}.dc_right{float:right}.dc_clear{content:"";display:block;clear:both}.box{width:800px;height:300px;margin:20px auto 0;box-shadow:0 0 10px #000;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;position:relative}.box .dc_carousel{width:100%;height:100%}.box .dc_carousel .dc_carousel_img{width:100%;height:90%;overflow:hidden;position:relative}.box .dc_carousel .dc_carousel_img ul{width:100%;height:100%;transform-style:preserve-3d;perspective:600px}.box .dc_carousel .dc_carousel_img ul li{width:20%;height:90%;position:absolute;box-shadow:-5px 5px 15px #333;-webkit-box-shadow:-5px 5px 15px #333;-moz-box-shadow:-5px 5px 15px #333;-o-box-shadow:-5px 5px 15px #333;opacity:}.box .dc_carousel .dc_carousel_img ul li img{width:100%;height:100%}.box .dc_carousel .dc_carousel_img ul .others{top:-40%}.box .dc_carousel .dc_carousel_img ul .first{left:40%;opacity:}.box .dc_carousel .dc_carousel_img ul .second{left:60%;transform:rotateY(40deg) scale(.5);opacity:}.box .dc_carousel .dc_carousel_img ul .last{left:20%;transform:rotateY(-40deg) scale(.5);opacity:}.box .dc_carousel .dc_carousel_img ul .third{left:70%;transform:rotateY(50deg) scale(.2);opacity:}.box .dc_carousel .dc_carousel_img ul .last_second{left:10%;transform:rotateY(-50deg) scale(.2);opacity:}.box .dc_carousel .dc_carousel_img ul .dc_change{transform:translate3d(30px, 30px, 30px)}.box .dc_carousel .dc_carousel_point{width:100%;text-align:center;position:absolute;z-index:}.box .dc_carousel .dc_carousel_point li{width:10px;height:10px;list-style:none;border-radius:50%;background:#bbb;display:inline-block}.box .dc_carousel .dc_carousel_point .current_point{background:#3ff}.box .dc_carousel .previous,.box .dc_carousel .next{position:absolute;top:40%;font:30px "Times New Roman";cursor:pointer}.box .dc_carousel .next{left:94%}

跟上一次的原理类似，但这个不同的是用类名来代替并动态修改类名，可拓展性更强，且修改只需修改css样式即可，简单快捷方便，另外一个是图片是可以无限拓展的，不过需要把新加的图片放在中间并加上others类名，很方便吧~~

3d轮播图（另一种方式，可以实现的功能更为强大也更为灵活，简单一句话，比酷狗优酷的炫）的更多相关文章

  1. JavaScript+HTML+CSS 无缝滚动轮播图的两种方式

    第一种方式 在轮播图最后添加第一张,一张重复的图片. 点击前一张,到了第一张,将父级oList移动到最后一张(也就是添加的重复的第一张),在进行后续动画. 点击下一张,到了最后一张(也就是添加的重复的 ...

  2. CSS3之3D轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 3d轮播图——类似酷狗的轮播

    说到轮播图,其实只要是跟web开发相关的无论是前端后端应该都不陌生,各种各样的轮播图,从以前的单纯的平面山水画遮盖滑动或滚动,到Jquery的animate甚至是h5+css3,各种炫酷的轮播图更是层 ...

  4. 微信小程序 - 3d轮播图组件(基础)

    <!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...

  5. 小程序实现非swiper组件的自定义伪3D轮播图

    效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...

  6. 微信小程序3D轮播图

    <!-- 轮播图 --> <swiper previous-margin='50px' next-margin='50px' bindchange="swiperChang ...

  7. 插件-3D轮播图

    先上效果图 查看实例点击 这里  这个栗子中,可以选择展示 5 张 或者展示 3 张,即使是只有一个slide,也可以完成布局,正常轮播,麻麻再也不用怕只有4个slid而不能用这种轮播啦! 本栗实现原 ...

  8. featureCarousel.js 3d轮播图插件

    jQuery Feature Carousel 插件是国外的一比较优秀的旋转木马图片插件. 点击这里进入原文. 插件特点: 1.处理div的3d旋转木马效果. 2.支持一个中心,2个侧面的功能 3.中 ...

  9. 利用css3实现3D轮播图

    动画实现主要利用了z-index将层级关系改变,从而实现了焦点图的效果:css3属性 transform rotate 来实现图片的动画效果 .transition实现过度动画! * { margin ...

随机推荐

  1. 12_Android中HttpClient的应用，doGet,doPost,doHttpClientGet,doHttpClient请求，另外借助第三方框架实现网络连接的应用，

     准备条件, 编写一个web项目.编写一个servlet,若用户名为lisi,密码为123,则返回"登录成功",否则"登录失败".项目名为ServerIth ...

  2. 一个炫字都不够？？！！！手把手带你打造3D自定义view

    分享一则最近流行的笑话: 最新科学研究表明:寒冷可以使人保持年轻,楼下的王大爷表示虽然今年已经60多岁了,但是仍然冷的跟孙子一样. 呃.好吧,这个冬天确实有点冷,在广州活生生的把我这个原生北方人,冻成 ...

  3. Linux0.11 中对地址的管理

    个字节,段信息无法直接存放在段寄存器中(段寄存器只有2字节).Intel的设计是段描述符集中存放在GDT或LDT中,而段寄存器存放的是段描述符在GDT或LDT内的索引值(index). Linux中逻 ...

  4. AngularJS进阶(十四)AngularJS灵异代码事件

    AngularJS灵异代码事件 注:请点击此处进行充电! 事情原委 router_sys.js源代码如下: 自己在html路由跳转的代码如下: 但是在实际路由过程中,却路由到了下面的状态,相应的页面中 ...

  5. 使用Multiplayer Networking做一个简单的多人游戏例子-1/3（Unity3D开发之二十五）

    猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51006463 ...

  6. Android服务器——使用TomCat实现软件的版本检测，升级，以及下载更新进度！

    Android服务器--使用TomCat实现软件的版本检测,升级,以及下载更新进度! 算下来,TomCat服务器已经写了很长一段时间了,一直说拿他来搞点事 情,也一直没做,今天刚好有空,交流群还有人请 ...

  7. iOS监听模式系列之IOS中的几中观察监听模式

    本文介绍Objective C中实现观察者模式(也被称为广播者/监听者.发布/注册或者通知)的五种方法以及每种方法的价值所在. 该文章将包括: 1 手动广播者和监听者(Broadcaster and ...

  8. lpad函数

    函数介绍 lpad函数是Oracle数据库函数,lpad函数从左边对字符串使用指定的字符进行填充.从其字面意思也可以理解,l是left的简写,pad是填充的意思,所以lpad就是从左边填充的意思. 2 ...

  9. matlab GUI保存axes（坐标轴）上的图像

    1.默认方式 matlab GUI默认菜单的保存图像默认为保持全部GUI,包括使用" 菜单->编辑->复制图形". 2 保存可见区域 2.1 代码 [FileName, ...

  10. SpringBoot2.0之二 新建RESTfull风格项目

    1.新建一个Maven项目(具体方法可以参照 SpringBoot之一) 2.先建一个User类 package com.somta.springboot.pojo; public class Use ...