CoreThink开发（十）把官方首页轮播替换成HTML5-3D轮播
效果：
资源已经上传到我的下载里边。
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轮播的更多相关文章
- 小程序实现非swiper组件的自定义伪3D轮播图
效果如下: 我用了很笨的方法实现的,大致就是: 1.当前点击的div(view)如果前后都有内容,那么,当前div(view)就设置到中间,前一个就设置到左边,前一个的前面所有全部设置到最左边,后面一 ...
- vue 3d轮播组件 vue-carousel-3d
开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...
- 3D轮播切换特效 源码
这个3D轮播切换特效是我2017年2月份写的 当初我 刚接触HTML不久,现在把源码分享给大家 源码的注释超级清楚 . <!-- 声明文档类型:html 作用:符合w3c统一标准规范 每个浏览器 ...
- 微信小程序之 3d轮播（swiper来实现）
以前写过一篇3d轮播,就是这篇,使用的方法比较笨拙,而且代码不简洁.这次发现swiper也能实现同样的效果.故记录一下. 先看看效果: wxml: <swiper previous-margin ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 微信小程序 - 3d轮播图组件(基础)
<!-- 目前仅支持data数据源来自banner,请看测试案例 ################ 以上三种形式轮播: 1. basic 2. 3d 3. book basic即普通轮播 3d即 ...
- 第一次用写一个3d轮播
2016-07-11gallery 3d html <!doctype html><html lang="en"><head> <met ...
- 01.轮播图之一 ：scrollView 轮播
接触的每个项目,都会用到轮播图的部分,轮播图都写了好多次,用过各种各样的方式写: 这篇总结的博客,我将分为几个篇幅写,希望写完这几篇博客之后,我能总结出自己写这个轮播的优缺和不同之处 scrollvi ...
- Taro -- Swiper的图片由小变大3d轮播效果
Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...
随机推荐
- ecmall的物流配送体系改造
接触多了ecshop.ecmall原始逻辑的,一般都习惯以整单的方式统一计算运费,这是一种很简单的思路. 但淘宝多了,就发现,物流运费没有那么简单. 首先,每种商品单独设置运费的体系,或者叫运费模板: ...
- 使用ASM获得JAVA类方法参数名
在Java1.8之后,可以通过反射API java.lang.reflect.Executable.getParameters来获取到方法参数的元信息,(在使用编译器时加上-parameters参数, ...
- libubox-ustream
参考:libubox [4] - uloop runqueue ustream libubox提供了流缓冲管理,定义在文件ustream.h,ustream.c和ustream-fd.c. 1. 数据 ...
- bzoj2440 完全平方数 莫比乌斯值+容斥+二分
莫比乌斯值+容斥+二分 /** 题目:bzoj2440 完全平方数 链接:http://www.lydsy.com/JudgeOnline/problem.php?id=2440 题意:求第k个小x数 ...
- 封装常用的selenium方法
package com.yk.userlive.base; import java.net.MalformedURLException;import java.net.URL;import java. ...
- Sql Server根据表名生成查询的存储过程(查询条件可选)
static void Main(string[] args) { string 表名 = "water_emstime"; string sql = "exec Get ...
- 蓝桥杯 第三届C/C++预赛真题（6） 大数乘法（数学题）
对于32位字长的机器,大约超过20亿,用int类型就无法表示了,我们可以选择int64类型,但无论怎样扩展,固定的整数类型总是有表达的极限!如果对超级大整数进行精确运算呢?一个简单的办法是:仅仅使用现 ...
- ASP.NET动态添加控件一例
第一次单击页面中有3个Label,第二次单击有6个,第三次单击有9个,也就是每次单击要在上次的状态下再添加3个. 我的方法是,可以通过Session来保存上次的状态,一种解法如下: Test.aspx ...
- drupal7使用数据库api db_query需要注意的地方
写自定义module时候需要从数据库检索数据,用到了数据库的api,用了下面的sql: $record = db_query("SELECT 'sampledate', 'time' FRO ...
- Response响应对象
1.HttpServletResponse HttpServletResponse是一个定义在Servlet API中的接口,继承自ServletReponse接口,用于封装HTTP响应消息.HTTP ...