1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer;

2.将代码黏贴成html文件,直接用浏览器打开即可;

3.layer属于弹窗提示类插件,可能需要自己手动引入,因为在分成1000分以上时,可能浏览器会被卡死,所以给了一个小小的弹窗提示!

4.代码中有注释,看到的小伙伴可以用chrome或者是火狐浏览器测试一下,每个浏览器解析代码机制不同,会一点差异,不支持IE浏览器。

代码如下:

<!doctype html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="1的N次幂">
    <meta name="Keywords" content="3D banner">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:14px;
        }
        a{
            text-decoration:none;
            font-size:14px;
            color:#fff;
        }
        ul li,ol{
            list-style-type:none;
        }
        .bg_img{
            width:100%;
            height:100%;
        }
        .bg_img img{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
        }
        .container{
            margin-top:110px;
            width:100%;
            height:600px;
        }
        .container .banner{
            margin:auto;
            width:800px;
            height:300px;
            perspective:800px;
        }
        .container .banner ul{
            width:800px;
            height:300px;
        }
        .container .banner ul li{
            height:300px;
            position:relative;
            transform-style:preserve-3d;
            float:left;
        }
        .container .banner ul li div{
            height:300px;
            width:100%;
            position:absolute;
            text-align:center;
            line-height:300px;
        }
        /*li div:nyh-child(n):表示li下的第n个div
            transform-origin:旋转轴
            transform:translateZ(150px) rotateX(90deg);沿着z轴正方向移动150px,沿着X轴旋转90度
        */
        .container .banner ul li div:nth-child(1){
            top:-300px;
            transform:translateZ(150px) rotateX(90deg);
            transform-origin:bottom;
            background-image:url("http://a2.qpic.cn/psb?/V13NXKT31gjmyo/a5bjFmef8GgRPOHWtmyaLfIoH*I23Oii0kIJm1.uzgo!/b/dAkBAAAAAAAA&bo=IAMvAQAAAAAFByk!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(2){
            top:300px;
            transform:translateZ(150px) rotateX(-90deg);
            transform-origin:top;
            background-image:url("http://a3.qpic.cn/psb?/V13NXKT31gjmyo/4sadN7zAjedk2GVCDbKcSXvHFfJ2OUfys9AvdQ73Cdc!/b/dAoBAAAAAAAA&bo=KgM.AQAAAAAFADU!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(3){
            transform:translateZ(150px);
            background-image:url("http://a1.qpic.cn/psb?/V13NXKT31gjmyo/T*2y5kTD84XvskMWRXIItp64ZFWat2ojZk6rHRFY81A!/b/dAsBAAAAAAAA&bo=KQM3AQAAAAAFAD8!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(4){
            transform:translateZ(-150px) rotateX(180deg);
            background-image:url("http://a1.qpic.cn/psb?/V13NXKT31gjmyo/.H6eziKX93XqAVZ1cZMbtyi9YNRkLbwMoZOzlun06Ak!/b/dAsBAAAAAAAA&bo=KQNUAQAAAAAFAFw!&rf=viewer_4");
        }
        .container .banner ol{
            position:absolute;
            right:-60px;
            bottom:-15px;
        }
        .container .banner ol li{
            position:relative;
            z-index:9999;
            float:left;
            margin:3px;
            font-size:14px;
            border:1px solid #fff;
            background-color:rgba(0,0,0,0.8);
            color:#fff;
            width:20px;
            height:20px;
            text-align:center;
            line-height:20px;
            border-radius:50%;
            cursor:pointer;
            transition:.5s;
        }

        .container .banner ol:hover li{
            box-shadow:1px 1px 1px 0 rgba(204,204,204,0.7);
            transition:.5s;
        }
        .container .banner ol li:hover{
            box-shadow:1px 1px 1px 1px #222;
            transition:.5s;
        }
        #config{
            margin:30px;
            position:relative;
            z-index:9999;
            font-size:20px;
            color:#fff;
        }
        #config input{
            height:20px;
            width:100px;
            font-weight:800;
            font-size:20px;
            color:#f00;
            border:0;
        }

    </style>
 </head>

 <body>
    <div class="bg_img">
        <img src="http://a1.qpic.cn/psb?/V13NXKT31gjmyo/k72K3W2VjrL9oaQotS9QgcTWd2bZ9pMl6iR4FMo8ylk!/b/dHEBAAAAAAAA&bo=cgSAAgAAAAAFANc!&rf=viewer_4"/>
    </div>
    <div id="config">
        份&nbsp;&nbsp;&nbsp;数:<input type="number"  id="count"/></br>
        时间(秒):<span type="number" id="base_time"></span></br>
        延迟(秒):<span type="number" id="delay_time"></span>
    </div>
    <div class="container">
        <div class="banner">
            <ul>

            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>
    </div>

    <script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/layer.js"></script>
    <script type="text/javascript">
        //设置轮播图被分成的分数,播完的时间,和延迟时间
        function banner(count,base_time,delay_time){
            var $ul = $(".container .banner ul");
            var $ol = $(".container .banner ol");
            var bg_position = -800/count;
            //循环份数,动态的设置背景定位
            for(var i=0;i<count;i++){
                if(i>=count-(count-1)/2){
                $ul.append(
                "<li style='z-index:"+-i+";transition:"+base_time+"s "+i*delay_time+"s;width:"+-bg_position+"px'>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                "</li>");
                }else{
                $ul.append(
                "<li style='z-index:"+i+";transition:"+base_time+"s "+i*delay_time+"s;width:"+-bg_position+"px'>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                "</li>");
                }
            }
            $(".container .banner ol").show();
            $ol.find("li").click(function(){
                var index  = $(this).index();
                $ul.find("li").finish().css({
                    "transform":"rotateX("+index*90+"deg)"
                });
            })
        }
        /*banner(份数,基础时间,延迟时间)
          banner(count,base_time,delay_time)

            测试结果:当满足以下条件时,效果最好
            if(count>=100){
                base_time = 1
                delay_time = 0.01;
            }
            if(count<100){
                base_time = 1
                delay_time = 0.1;
            }
        */
        $("#count").val(10)
        $("#base_time").text(1);
        $("#delay_time").text(0.1);
        banner(10,1,0.1);//默认是被分为10分 每份需要1秒钟走完,下一份开始走的时间会延迟0.1秒

    $(function(){
        //动态的设置被分成的分数,这里采用键盘事件获取分数,请用键盘输入分数
        $("#config").find("#count").keyup(function(){
            $(".container .banner ol").hide();
            $(".container .banner ul").html("");
            var count = $(this).val();
            if(count<=10){
                $("#base_time").text(0.5);
                $("#delay_time").text(0.1);
                banner(count,0.5,0.1)
            }else if(count<=50){
                $("#base_time").text(1);
                $("#delay_time").text(0.03);
                banner(count,1,0.03);
            }else if(count<=100){
                $("#base_time").text(1);
                $("#delay_time").text(0.02);
                banner(count,1,0.02);
            }else if(count<1000){
                $("#base_time").text(1);
                $("#delay_time").text(count/30000);
                banner(count,1,count/30000);
            }else{
                //被分成1000分以上时给予提示,采用layer插件,需引入jQuery
                layer.confirm('你确定你的电脑支持'+count+'份?', {
                      btn: ['YES','NO']
                    }, function(){
                        layer.closeAll("dialog");
                        $("#base_time").text(1);
                        $("#delay_time").text(count/100000);
                        banner(count,1,count/100000);
                    }, function(){
                        layer.closeAll("dialog");
                    });

            }

        });

    })
    </script>
 </body>
</html>

 

我们把它分成150分的效果

最新文章

  1. Java总结篇系列:Java泛型
  2. 仿window系统自带的日期差计算器类
  3. Android学习——uses-sdk标签详解
  4. Jsp练习——连接数据库模拟登录
  5. 在同一台电脑上同时安装Python2和Python3
  6. sqlserver on linux
  7. Part 34 to 35 Talking about multiple class inheritance in C#
  8. windows 7环境下配置oracle 11g 客户端
  9. 浅尝key-value数据库(二)——MongoDB的优与劣
  10. 李明杰的视频和李明杰的博客是学习OC的基础
  11. YII关联字段并带搜索排序功能
  12. Web Api使用Swagger提供在线文档
  13. .Net Windows Service(服务) 调试安装及System.Timers.Timer 使用
  14. flask自动代码自动补全
  15. Elastix GOIP 网关配合
  16. windows下使用mingw编译出ffplay(简化版)
  17. MySQL--DROP TABLE与MySQL版本
  18. 【转】每天一个linux命令(6):rmdir 命令
  19. Linux学习---Linux用户审计简单版
  20. xarmain使用Forms编译android工程出现support_r19.0.1.zip支持包错误

热门文章

  1. mongo virtual
  2. sklearn学习笔记2
  3. android apk静默安装
  4. java多态实现原理
  5. supersr--KVO/KVC
  6. 百度Ueditor编辑器的Html模式自动替换样式的解决方法
  7. EF Code First教程-01 创建一个简单的Code First程序
  8. 解决每次打开office 2010显示正在配置的问题
  9. Github开源编辑器Atom
  10. 16)JAVA实现回调(Android,Swing中各类listener的实现)
  11. Nginx (基于linux)综合
  12. linux,Centos,bash: service: command not found
  13. Tomcat 内存与优化篇
  14. yum subversion puppet puppet-server
  15. Java反射机制剖析(一)-定义和API
  16. Javascript的RegExp对象(转载自网络)
  17. PredictionIO+Universal Recommender快速开发部署推荐引擎的问题总结(3)
  18. WebService CXF知识总结
  19. numpy最值
  20. MyBatis - 10.MyBatis扩展