码迷，mamicode.com
首页 > Web开发 > 详细

CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播

时间：2017-12-22 15:52:53      阅读：284      评论：0      收藏：0      [点我收藏+]

标签：down   extend   inter   center   div   sel   int   :hover   new   

效果：

技术分享图片

资源已经上传到我的下载里边。
http://download.csdn.net/detail/u012995856/9587206
1.复制资源文件到CoreThink项目中

corethink\Application\Home\View\Public

2.写模板代码
引入js

<block name="script">
  <script src="__HOME_JS__/jquery-1.7.2.min.js"></script>
    <script src="__HOME_JS__/html5zoo.js"></script>
    <script src="__HOME_JS__/lovelygallery.js"></script>
</block>

把官方的轮播替换成这样

<block name="jumbotron">

    <!-- 轮播图 -->
       <div class="pics_wrap">
           <div id="html5zoo-1">
               <ul class="html5zoo-slides" style="display: none;">

                 <cms:slider_list name="sl">
                       <li>
                           <a href="{$sl.url}" target="_blank">
                               <img src="{$sl.cover|get_cover}"/>
                           </a>
                       </li>
                   </cms:slider_list>


               </ul>
           </div>
       </div>
       <!-- 轮播图结束 -->
</block>

注：
官方轮播后台幻灯片什么的都很完善了，只是前台模板没动态显示
corethink\Application\Home\View\Index\index.html

<extend name="$_home_public_layout"/>

<block name="title"><title>{:C(‘WEB_SITE_TITLE‘)}－{:C(‘WEB_SITE_SLOGAN‘)}</title></block>

<block name="style">
    <style type="text/css">
        /* 首页幻灯片 */
        #index-carousel .jumbotron {
            height: 500px;
            padding: 20px 0;
        }
        #index-carousel .carousel-indicators {
            bottom: 35px;
        }

        /* 幻灯片01 简介 */
        .opencmf .title {
            margin-top: 60px;
        }
        .opencmf .abstract {
            margin: 30px 0 70px;
        }
        .opencmf .action .btn-default {
            color: #fff;
            border-color: #fff;
            background: none;
        }
        .opencmf .action .btn-default:hover,
        .opencmf .action .btn-default.active {
            color: #3EA9F5;
            background: #fff;
        }

        /* 幻灯片02 特性 */
        .section-feature-slider h3 {
            color: #fff;
        }
        .section-feature-slider .feature-list .thumbnail {
            background: none;
            border: 0;
        }
        .section-feature-slider .feature-list .thumbnail .cover {
            text-align: center;
            vertical-align: middle;
            padding: 20px;
            margin: auto;
            overflow: hidden;
        }
        .section-feature-slider .feature-list .thumbnail .fa {
            font-size: 60px;
            margin-top: 15px;
            color: #fff;
        }
        .section-feature-slider .feature-list .thumbnail .caption {
            height: 60px;
        }
        .section-feature-slider .feature-list .thumbnail .caption h4 {
            color: #fff;
            cursor: pointer;
            font-size: 14px;
        }

        /* section */
        .section {
            padding: 20px 0;
        }
        .section h3 {
            margin-bottom: 50px;
        }

        /* 官方模块 */
        .section-module .module-list .thumbnail {
            background: none;
            border: 1px solid transparent;
        }
        .section-module .module-list .thumbnail:hover {
            background: none;
            border: 1px solid #ddd;
            cursor: pointer;
        }
        .section-module .module-list .thumbnail .cover {
            width: 100px;
            height: 100px;
            text-align: center;
            vertical-align: middle;
            padding: 10px;
            border-radius: 50%;
            background: #eee;
            margin: auto;
            overflow: hidden;
        }
        .section-module .module-list .thumbnail .fa {
            font-size: 60px;
            margin-top: 15px;
            color: #fff;
        }
        .section-module .module-list .thumbnail .caption {
            height: 32px;
        }
        .section-module .module-list .thumbnail .caption h4 {
            color: #727F8C;
            transition: all 1s;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            /* 幻灯切换 */
            #index-carousel .carousel-indicators {
                bottom: 10px;
            }
            .opencmf .title {
                margin-top: 10px;
                font-size: 20px;
            }
            .opencmf .abstract {
                margin: 10px 0;
                font-size: 12px;
            }
            .opencmf .action .btn {
                font-size: 12px;
            }

            /* 特性 */
            #index-carousel .jumbotron {
                height: 220px;
                padding: 10px 0;
            }
            .section-feature-slider h3 {
                font-size: 14px;
            }
            .section-feature-slider .feature-list .thumbnail {
                margin-bottom: 5px;
            }
            .section-feature-slider .feature-list .thumbnail .cover {
                padding: 10px 0 0 0;
            }
            .section-feature-slider .feature-list .thumbnail .fa {
                font-size: 20px;
                margin-top: 0px;
                color: #fff;
            }
            .section-feature-slider .feature-list .thumbnail .caption {
                height: 10px;
            }
            .section-feature-slider .feature-list .thumbnail .caption h4 {
                color: #fff;
                cursor: pointer;
                font-size: 12px;
                display: none;
            }

            /* 官方模块 */
            .section-module .module-list .thumbnail .cover {
                width: 80px;
                height: 80px;
                padding: 10px;
            }
            .section-module .module-list .thumbnail .fa {
                font-size: 30px;
                margin-top: 15px;
                color: #fff;
            }

            /* section */
            .section {
                padding: 0px 0;
            }
            .section h3 {
                margin-bottom: 15px;
            }
        }
    </style>
</block>

<block name="jumbotron">

    <!-- 轮播图 -->
       <div class="pics_wrap">
           <div id="html5zoo-1">
               <ul class="html5zoo-slides" style="display: none;">

                 <cms:slider_list name="sl">
                       <li>
                           <a href="{$sl.url}" target="_blank">
                               <img src="{$sl.cover|get_cover}"/>
                           </a>
                       </li>
                   </cms:slider_list>


               </ul>
           </div>
       </div>
       <!-- 轮播图结束 -->
</block>

<block name="main">


    <div class="section section-module">
        <div class="container">
            <h3 class="text-center">官方模块</h3>
            <div class="row module-list">
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover1" style="background: #F68A3A;"><span class="fa fa-cubes fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">核心模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover2" style="background: #398CD2;"><span class="fa fa-newspaper-o fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">CMS通用模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover3" style="background: #80C243;"><span class="fa fa-users fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">用户中心模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover4" style="background: #DC6AC6;"><span class="fa fa-weixin fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">微信模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover5" style="background: #45BEC3;"><span class="fa fa-book fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">手册模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover6" style="background: #3C9746;"><span class="fa fa-commenting-o fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">论坛模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover7" style="background: #FED825;"><span class="fa fa-money fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">充值模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover8" style="background: #E83A2C;"><span class="fa fa-gavel fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">跳蚤市场</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover1" style="background: #F68A3A;"><span class="fa fa-history fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">创业项目</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover2" style="background: #398CD2;"><span class="fa fa-user fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">投资人</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover3" style="background: #80C243;"><span class="fa fa-home fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">租房房源</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover4" style="background: #DC6AC6;"><span class="fa fa-calendar-check-o fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">工单模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover5" style="background: #45BEC3;"><span class="fa fa-send-o fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">软件发布</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover6" style="background: #3C9746;"><span class="fa fa-thumbs-o-up fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">捐赠模块</h4>
                        </div>
                    </div>
                </div>
                <div class="col-xs-4 col-sm-4 col-md-2">
                    <div class="thumbnail text-center">
                        <div class="cover cover7" style="background: #FED825;"><span class="fa fa-coffee fa-5x"><span></div>
                        <div class="caption">
                            <h4 class="text-center">开发工具</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="script">
  <script src="__HOME_JS__/jquery-1.7.2.min.js"></script>
    <script src="__HOME_JS__/html5zoo.js"></script>
    <script src="__HOME_JS__/lovelygallery.js"></script>
</block>

　

CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播

标签：down   extend   inter   center   div   sel   int   :hover   new   

原文地址：http://www.cnblogs.com/mracale/p/8086075.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！