大佬教程收集整理的这篇文章主要介绍了CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
corethink\Application\Home\View\Public
@H_874_5@2.写模板代码 <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>
@H_874_5@把官方的轮播替换成这样
<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>
@H_874_5@注： <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 { @H_931_33@margin-top: 60px; } .opencmf .abstract { @H_931_33@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; @H_931_33@margin: auto; overflow: hidden; } .section-feature-slider .feature-list .thumbnail .fa { font-size: 60px; @H_931_33@margin-top: 15px; color: #fff; } .section-feature-slider .feature-list .thumbnail .caption { height: 60px; } .section-feature-slider .feature-list .thumbnail .caption h4 { color: #fff; @R_801_10930@or: pointer; font-size: 14px; } /* section */ .section { padding: 20px 0; } .section h3 { @H_931_33@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; @R_801_10930@or: pointer; } .section-module .module-list .thumbnail .cover { width: 100px; height: 100px; text-align: center; vertical-align: middle; padding: 10px; border-radius: 50%; BACkground: #eee; @H_931_33@margin: auto; overflow: hidden; } .section-module .module-list .thumbnail .fa { font-size: 60px; @H_931_33@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; } @@H_766_832@media (max-width: 768pX) { /* 幻灯切换 */ #index-carousel .carousel-inDicators { bottom: 10px; } .opencmf .title { @H_931_33@margin-top: 10px; font-size: 20px; } .opencmf .abstract { @H_931_33@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 { @H_931_33@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; @H_931_33@margin-top: 0px; color: #fff; } .section-feature-slider .feature-list .thumbnail .caption { height: 10px; } .section-feature-slider .feature-list .thumbnail .caption h4 { color: #fff; @R_801_10930@or: 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; @H_931_33@margin-top: 15px; color: #fff; } /* section */ .section { padding: 0px 0; } .section h3 { @H_931_33@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轮播全部内容，希望文章能够帮你解决CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。