欢迎光临黑马视觉品牌官网,开启你的互联网营销之旅!
新闻中心 网络推广 网站建设 优化推广

pbootcms 模板制作教程(六) - 手页Banner轮播

时间:2019-08-21   来源:网站建设

手页的大图轮播,算是网站中的一道“硬菜”了。大图美不美观,直接影响整个网站的格局。

当然,这道“硬菜”的关键部分应该掌握在设计师手中,设计师就是这道菜的厨师,而写模板的只不过是端盘子的而已。

可是,职业不分贵贱,即便大厨烧出了美味的菜肴,服务员端菜的时候往里面加了只苍蝇,顾客也还是会反胃的。

所以,不要小看端盘子的,他也是整个流程中重要的一环。


回到正题,因为是模板制作教程,所以关于图片怎么轮播的部分就不展开讲了。各种素材站有很多炫酷的jQuery轮播插件,可以自行选择。

教程中将以swiper为例,来做一个简单的轮播。


swiper是一个强大的轮播插件,关于具体的一些使用方法,请自行参阅官方文档。


一、先将swiper的文件放置在文件夹中,并引入到模板文件。

001.jpg



二、写HTML结构

<div id="Banner" class="swiper-container">
    <!-- 轮播主体 -->
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            <a href="#">
                <img src="#" alt="#">
            </a>
        </div>
    </div>
    <!-- 轮播控件 -->
    <div class="banner-prev">
        <i class="fa fa-angle-left"></i>
    </div>
    <div class="banner-next">
        <i class="fa fa-angle-right"></i>
    </div>
</div>


三、调用轮播图片

这里有两个思路,使用PbootCMS自带的轮播图片模块或者自建一个轮播模型。

1、使用PbootCMS自带的幻灯片模块

{pboot:slide gid=1 num=3}
<div class="swiper-slide">
    <a href="[slide:link]">
      <img src="[slide:src]" alt="[slide:title]">
    </a>
</div>
{/pboot:slide}

很简单,使用{pboot:slide}标签调用即可,其中gid是分组,num是数量。

自带的轮播扩展内置了10个分组,有标题、副标题和链接地址,一般轮播够用了。


2、自建一个轮播模型

这是本篇教程着重要讲解的部分。

关于模型概念的理解,在使用PbootCMS制作模板的时候是非常重要的。


(1)、新建一个轮播模型

002.png

输入模型名称,模型类型选择列表,模板留空,提交。轮播模型就建好了,是不是很简单。


(2)、添加模型字段

003.jpg

这里可以自己添加需要在轮播中出现的一些元素,比如覆盖在轮播图片上的文字,点击跳转的链接等等,更高级一些甚至还可以添加一个表示当前轮播图片的动画效果的CSS名称,让不同的轮播图用不同的动画效果出现。(只要开动脑筋,PbootCMS的模型让一切皆有可能)


(3)、添加轮播栏目

004.jpg

添加栏目的理由:

醉简单的理由就是添加内容需要选择栏目,不然不能添加。不过,仔细思考一下,一个网站的轮播很有可能不止在手页顶部调用,比如一些侧边栏广告轮播。那么这里的栏目就相当于默认轮播扩展中的分组,不同的是,这里的栏目是可以无限分组的,而且还可以根据栏目名称知道这是显示在哪里的轮播,方便管理。


(4)、接下来就可以添加轮播图了

005.jpg

可以看到,刚才添加的字段“轮播文字”也在这里显示了。


(5)、轮播图调用

关于自建模型中轮播图的调用,参考官网文档:指定列表调用 即可。


四、添加swiper的js部分

<script>
var Banner = new Swiper ('#Banner', {
    speed: 1500,
    autoplay: {
        delay: 5000,
    },
    loop: true,
            
    //Pagination
    pagination: {
        el: '.swiper-pagination',
        clickable: true,
    },
    
    //Navigation
    navigation: {
        nextEl: '.banner-next',
        prevEl: '.banner-prev',
    },
})  
</script>

注意:代码需要在swiper.min.js后面。


完成,剩下的就是CSS样式美化问题了。


总结:轮播图制作的时候主要就是调用思路。使用自带的轮播扩展,可以直接添加调用;使用模型的方式,可以做一些更高级的定义。


本文标签:
新闻推荐
盐田网页设计品牌
盐田网页设计品牌

盐田网页设计品牌日前,广西大学科技园与卓越迈创达成一致协议,站策划、网页制作设计、程序等服务。广西大...

蛇口网站改版哪个公司好
蛇口网站改版哪个公司好

蛇口网站改版哪个公司好站域名的价格都是的。主要都是公开出售的,因此它们之间没有太大的差距,但是在程序...

龙岗网站开发哪里好
龙岗网站开发哪里好

龙岗网站开发哪里好建设具有强烈的和品牌宗旨。的类型因用途不同而不同,所反映的功能也不同。网站建设的目...

西乡网页设计价格
西乡网页设计价格

西乡网页设计价格在建设过程中,很容易忽略相关行业的联系。站主页上突出显示相关行业风格,则可以在很大程...

在线沟通
点我即可
对话
15899750475
手机
微信扫一扫

编辑 装修 价格 托管 实力 流量 搜索引擎 服务器 标准 上线 业务

微信
Top