swiper幻灯片初级教程2018_柒侠伍义
本帖最后由 柒侠伍义 于 2017-10-21 16:12 编辑主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第01章：下载最新SWIPER3.4.2版本
在很久很久以N年前..
想到做幻灯片就想到ppt
时代在变化
现在2017年想到做幻灯片
想到SWIPER...
哈哈和...
ppt不是不好
问题非常不方便放到网站去
因为如果你没有安装微软的power point
你是看不到幻灯片的
好显勒...
#￥%……&×（）...
如今有了SWIPER
咱们所制作的幻灯片
放到网络，电脑可以看到
手机也不是问题
哈哈和...好料...
好了广告打完了
回归正题
按下方链接连下载SWIPER官方源码
http://www.swiper.com.cn/download/index.html
里面有很多很多模板演示
虽然好多演示（39个）
对初级者来说
看了还是一头雾水
也不知道选择那一个好
刚开始时，我也不例外...
好吧！就一个一个看完...
哇塞～～～
好像很厉害的样子...
哈哈和...
001 未完
本帖最后由 柒侠伍义 于 2017-10-21 16:15 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第02章：选择一个29的演示
在这么多演示中
我看上了第29的
29-custom-pagination.html
好的
我们就copy这个
放桌面的一个新的文件夹
取名 swiper
点击打开看一下
？？？？
好像有点不对劲？
不是幻灯片吗？
怎么好像不一样？
为什么会怎样？
？？？？
哈哈和...
有一点点html基础的人
都会想到...
是少了一些程序
用微软的FrontPage打开看一看源码
是少了2个程序
上面有一个...
<link rel="stylesheet" href="../dist/css/swiper.min.css">
下面有一个...
<script src="../dist/js/swiper.min.js"></script>
好的
我们去dist/js和dist/css把它copy过来就是
弄一个新的文件夹叫 css
把这2个程序丢进去
把路径换一下，变成这样...
<link rel="stylesheet" href="css/swiper.min.css">
<script src="css/swiper.min.js"></script>
哈哈和...
终于正常显示了
你做到了吗？
如果做不到...
唉！...
你还是放弃学习吧！
...
...
哈哈和...
*有些人会问
为什么不是弄2个文件夹
一个叫css
一个叫js
css的放在css
js的放在js
哈哈和...我的看法是...
简单的事情不要复杂化
哈哈和...
*没有微软FrontPage
可以去网络搜索下载微软FrontPage绿色版本
(不要问我为什么是绿色版本
我也不知道 哈哈和...)
002（未完）
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第03章：autoplay
发现一个问题...
这个幻灯片为什么不会自己动的？
幻灯片不是应该是一个一个慢慢播放的吗？
怎么办？
哈哈和...
查看一下SWIPER的API
得知有一个叫 autoplay的东东
加上它就可以了
好的
我们就加...
打开微软FrontPage看看源码
在源码下方找到<script>
加 autoplay:5000,
意思就是5秒就下一个幻灯片
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
autoplay:5000, //添加轮播 5000就是5秒
paginationBulletRender: function (swiper, index, className) {
return '<span class="' + className + '">' + (index + 1) + '</span>';
}
});
</script>
嗯！不错！不错！
可以一个一个幻灯片播放了
好像很简单就搞定
哈哈和...
...
...
...
下载源码：
003（未完）
本帖最后由 柒侠伍义 于 2017-10-21 16:22 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第04章：添加图片
嗯！去谷歌或百度图片库
下载10张图片试一试...
最好找钱的图片...
看了就爽...哈哈和...
弄一个新的文件夹叫
img
把所有图片就放在这个文件夹里面
把所有图片换简单的名字
M01.jpg，M02.jpg，M03.jpg....
顺便把这个页面换一个新的名字
29-custom-pagination.html save as index.html
<div class="swiper-slide"><IMG SRC="img/M01.jpg">Slide 1</div>
<div class="swiper-slide"><IMG SRC="img/M02.jpg">Slide 2</div>
<div class="swiper-slide"><IMG SRC="img/M03.jpg">Slide 3</div>
<div class="swiper-slide"><IMG SRC="img/M04.jpg">Slide 4</div>
<div class="swiper-slide"><IMG SRC="img/M05.jpg">Slide 5</div>
<div class="swiper-slide"><IMG SRC="img/M06.jpg">Slide 6</div>
<div class="swiper-slide"><IMG SRC="img/M07.jpg">Slide 7</div>
<div class="swiper-slide"><IMG SRC="img/M08.jpg">Slide 8</div>
<div class="swiper-slide"><IMG SRC="img/M09.jpg">Slide 9</div>
<div class="swiper-slide"><IMG SRC="img/M10.jpg">Slide 10</div>
下载004源码
*为什么改名叫 ： index.html ?
凡是有html基础的人都知道。
如果你不知道，请去谷歌或百度搜索
看看别人讲什么吧！
004 （未完）
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第05章：文字在图片上面
发现一个问题...
图片和文字平起平坐，排排坐...
好像不好看...
怎么办？
怎样把文字放在图片的上面呢？
好的，
有一个css 叫position: absolute; 的东东
加到文字那边就可以了.
<!-------------一个新的幻灯片----------------------->
<div class="swiper-slide"><IMG SRC="img/M01.jpg">
<FONT COLOR="#00FFFF"STYLE="position: absolute; font-size:100pt">
钱 1</FONT>
</div>
<!-------------一个新的幻灯片----------------------->
<div class="swiper-slide"><IMG SRC="img/M02.jpg">
<FONT COLOR="#00FFFF"STYLE="position: absolute; font-size:100pt">
钱 2</FONT>
</div>
<!-------------一个新的幻灯片----------------------->
...
...
...
...
...
顺便把字体放大看清楚一点
font-size:100pt；
哈哈和...
再顺便把字体的颜色改一下
FONT COLOR="#00FFFF"
哈哈和...
嗯 好像不错........
下载005源码
005（未完）
本帖最后由 柒侠伍义 于 2017-10-21 17:02 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第06章：幻灯片背景颜色
制作幻灯片的背景颜色我最喜好深色
白色.......嗯 不爽.........
比如 换黑色....
让我们来改一下...
不改没有问题
改了就发现问题啦！.......
下方的弹丸 1 2 3 4 5 6 7 8 9 10
好像只看到当前的号码
嗯！ 不好
改一改别的颜色看看
顺便也放大一点点看看
比如：黄色 红色....
可能会好看一点
.swiper-pagination-bullet {
width: 40px; /*弹丸宽度*/
height: 40px; /*弹丸高度*/
text-align: center; /*弹丸在中间*/
line-height: 40px; /*弹丸平均高度*/
font-size: 20px; /*弹丸大小*/
color: black; /*弹丸颜色*/
opacity: 1; /*弹丸透明度*/
background: yellow; /*弹丸背景颜色*/
}
.swiper-pagination-bullet-active {
color:#fff; /*弹丸颜色*/
background: red ; /*弹丸背景颜色*/
}
果然好看多了
不是吗？
哈哈和......
下载06源码（不带图片）
006（未完）
本帖最后由 柒侠伍义 于 2017-10-21 17:34 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第07章：轮播有问题？
看着简单就做出来的幻灯片在轮播....
爽........
这么简单就可以做出来........
注意！注意！注意！
我发现到一个问题啦！
发现轮播有问题.......
轮到10时....
轮播不是10了然后1开始......
而是快速倒退 10 9 8 7 6 5 4 3 2 1 ....然后1开始
不要以为我没有发现......哈哈和
有没有看到......
有没有发现........
注意一下.......
查一下官方API
**** Hidden Message *****
嗯.......
问题解决了
不错！不错！
哈哈和.....
007（未完）
本帖最后由 柒侠伍义 于 2017-10-21 18:44 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第08章：怎样添加 < >
我看到第14个demo
14-nav-arrows.html
有左右按钮 《》
要怎样添加呢？
可不可以添加？
查一下
14-nav-arrows.html
的源码
看到关键源码...
<!-- Add Arrows 添加箭头-->
<divclass="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
spaceBetween: 30
哦！原来叫 《箭头》
照着源码的地方
在自己的源码加一加看看
哈哈和.....easy job
一下子就搞定
下载源码（不包过图片）
008（未完）
本帖最后由 柒侠伍义 于 2017-10-22 15:11 编辑
主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第09章：图片铺满窗口问题
图片有大有小
有长有短
各式各样的都有
没有统一...
轮播的时候不好看
能不能把图片
填充整个画面又不要失真
这个问题我研究了好久好久
结论是<img ......> 不能办到
唯一方法是....
**** Hidden Message *****
搞定
漂亮啦！.......
是不是比刚才/以前版本的漂亮许多
好看许多....
哈哈和....
009（未完）
{:2_31:}{:2_31:}