需要静心学习的PbootCMS模板制作教程（六）
首页Banner轮播
首页的大图轮播，算是网站中的一道“硬菜”了。大图美不美观，直接影响整个网站的格局。
当然，这道“硬菜”的关键部分应该掌握在设计师手中，设计师就是这道菜的厨师，而写模板的只不过是端盘子的而已。
可是，职业不分贵贱，即便大厨烧出了美味的菜肴，服务员端菜的时候往里面加了只苍蝇，顾客也还是会反胃的。
所以，不要小看端盘子的，他也是整个流程中重要的一环。
制作轮播
回到正题，因为是模板制作教程，所以关于图片怎么轮播的部分就不展开讲了。各种素材站有很多炫酷的jQuery轮播插件，可以自行选择。
教程中将以swiper为例，来做一个简单的轮播。
swiper是一个强大的轮播插件，关于具体的一些使用方法，请自行参阅官方文档。
一、先将swiper的文件放置在文件夹中，并引入到模板文件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>需要静心学习的PbootCMS模板制作教程（六）</title> <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet"> </head> <body> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script> </html>
二、写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>
三、调用轮播图片
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是数量。
四、添加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后面。
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>需要静心学习的PbootCMS模板制作教程（六）</title> <link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.css" rel="stylesheet"> </head> <body> <div id="Banner" class="swiper-container"> <!-- 轮播主体 --> <div class="swiper-wrapper"> {*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*} </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> </body> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script> <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> </html>
完成，剩下的就是CSS样式美化问题了。
总结
使用自带的轮播扩展，直接添加调用即可。
联系客服
原创文章，转载请注明： 转载自广州SEO
本文链接地址: 需要静心学习的PbootCMS模板制作教程（六）
