关于轮播图的使用场景，几乎青一色的应用在PC端站点，以及移动端设备上，是页面特效与动画范畴使用最多的业务。那么既然这么多的使用频率，所以对于开发者而言，会写轮播图的代码，成了必然选项。
其实对于人类漫长的进化历史发展到今天，文字与方言的地缘差异远不及图片的表达和叙述来的直接了当。
接下来我们就谈谈关于如何写好一个轮播图代码的思路是什么？以及如何高效同时应用在PC端和移动端，也就是做到两者兼容。
1、首先在网页中引入样式库文件
<link rel="stylesheet" href="css/swiper.css">2、其次在网页中引入JS插件库文件
<body> <script src="js/swiper.min.js">script> body>3、然后把需要的图片进行布局
<div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner01.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner02.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner03.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner04.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner05.jpg" alt=""> div> div> <div class="swiper-pagination">div>div>4、完整的代码如下：
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> <link rel="stylesheet" href="css/swiper.css"> <style> .swiper-container{ width:1020px; height: 360px; overflow: hidden; }style>head><body> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"> <img src="img/banner01.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner02.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner03.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner04.jpg" alt=""> div> <div class="swiper-slide"> <img src="img/banner05.jpg" alt=""> div> div> <div class="swiper-pagination">div> div> <script src="js/swiper.min.js">script> <script> //实例化Swiper对象 var mySwiper = new Swiper('.swiper-container', { autoplay: { //设置自动轮播 disableOnInteraction:false }, delay: 2000, //设置轮播时间 pagination: { el: '.swiper-pagination', //打开分页控制器 clickable:true //设置在分页上可点击的操作 } })script>body>html>其实，聪明的人已经发现，我使用的插件！哈哈，短短几行JS代码就可以完成一个经典轮播图的效果。试想一下，如果使用原生JS一行一行的码字，不但容易出错，而且效率低，且CSS布局就要花掉一些时间进行完成。很显然，如果项目比较急，选择用原生的方式开发，就不是首选了。不啰嗦，直接上表格对比一下：
| 开发 | 不足 | 优势 |
| 原生开发 | 周期长，难度大，PC端与移动端兼容性差。 | 适合研究，原创轮播适配本地设备。开发周期不受第三方控制，版本迭代比较容易。 |
| 使用插件 | 需要研究开发文档，版本受制于人，用于项目上容易造成数据泄露。 | 大大缩短开发周期，使用方式简单易用，同时可以兼顾PC端与移动端。比较适合不涉密的商业及个人项目。 |
现在大家看完了这张表格，想必已经明白了原生与插件之间孰优孰劣了，不同的业务，选择不同的应用模式。这二者之间不存在谁革命谁的问题，更不存在谁颠覆谁的逻辑！当然，你两者都能写，才是最牛X的！
今天就讲到这里啦，下次再见喽！Bye-Bye
扫一扫
440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
