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分的效果

3D Banner(jQuery)的更多相关文章

  1. 3D banner(CSS3+HTML5)

    1.这是一篇 3Dbanner制作的简易流程,支持高版本的chrome和firefox浏览器,俩浏览器显示可能会有些差异 2.没有兼容性代码,因为仅仅只是熟悉流程,希望小伙伴们自己改善哈(>﹏& ...

  2. 14种网页图片和文字特效的jQuery插件代码

    1.网页图片3d旋转jQuery代码 演示和下载地址 2.存css3实现的tabl选项卡代码 演示和下载地址 3.jQuery标签旋转代码 演示和下载地址 4.鼠标悬浮的图片选项卡代码 演示和下载地址 ...

  3. jQuery背景跟随鼠标移动的网页导航

    首页 PSD模板 CSS模板 特效插件 源码下载 酷站欣赏 建站资源 建站教程 心境之旅 在线留言 设为首页 加入收藏 我要投稿 联系站长 Search     首页 PSD模板 CSS模板 特效插件 ...

  4. jquery树形菜单插件treeView

    Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  5. Web前端资源汇总

    本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...

  6. tooltip 鼠标移动上去出现图片或文字与title大同小异

    代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script ...

  7. 从零开始系列之vue全家桶(6)实战前的设计

    搭建好基本框架后我们应该先想一想个人博客应该有哪些功能呢? 为了更好的适应企业的要求,这里我将搭建一个非典型的博客. 在全部采用单页开发的情况下,使用vue-router,路由分别设置home.abo ...

  8. 30款jQuery常用网页焦点图banner图片切换 下载

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

  9. 30款jQuery常用网页焦点图banner图片切换 下载 (转)

    1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动 查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动 查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

随机推荐

  1. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  2. android知识点随笔

    android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...

  3. AVEVA Model Data Exchange Exports Structure Models

    AVEVA Model Data Exchange Exports Structure Modelseryar@163.com Use Model Data Exchange Addin to exp ...

  4. 【原创】开源Math.NET基础数学类库使用(12)C#随机数扩展方法

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...

  5. 从零开始编写自己的C#框架(6)——SubSonic3.0插件介绍(附源码)

    前面几章主要是概念性的东西为主,向初学者们介绍项目开始前的一些知识与内容,从本章开始将会进入实操阶段,希望跟着本系统学习的朋友认真按说明做好每一步操作(对于代码最好是直接照着文档内容在你的IDE中打一 ...

  6. java多线程--定时器Timer的使用

    定时的功能我们在手机上见得比较多,比如定时清理垃圾,闹钟,等等.定时功能在java中主要使用的就是Timer对象,他在内部使用的就是多线程的技术. Time类主要负责完成定时计划任务的功能,就是在指定 ...

  7. Hive启动报错: Found class jline.Terminal, but interface was expected

    报错: [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassC ...

  8. 关于Javascript作用域及作用域链的总结

    本文是根据以下文章以及<Javascript高级程序设计(第三版)>第四章相关内容总结的. 1.Javascript作用域原理,地址:http://www.laruence.com/200 ...

  9. [Asp.net 5] Localization-resx资源文件的管理

    上一篇博文地址:[Asp.net 5] Localization-简单易用的本地化-全球化信息 本文继续介绍asp.net 5多语言.今天重点讲的是多语言的resx文件.涉及到的工程有:Microso ...

  10. 【MVVM Light】新手初识MVVM,你一看就会

    一.前言 作为一个初入软件业的新手,各种设计模式与框架对我是眼花缭乱的.所以当我接触到这些新知识的时候就希望自己能总结几个步骤,以便更好更方便的在日常工作中进行使用. MVVM顾名思义就是Model- ...