swiper幻灯片初级教程2018_柒侠伍义

wangvsshen

...................怎么看一个都要回复一次

wangvsshen

这教程看的一点也不无聊，真的不错

thundersword

柒侠伍义

主题：swiper幻灯片初级 教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第11章：更换幻灯片时出现特效





看到没？
当手动或滑鼠拉动幻灯片
就看到下一张幻灯片是暗色一点点的
然后有暗变明...
是不是 很爽~~~
哈哈和....

添加3行源码就可以办到...

opacity:0.5; /*更换幻灯片时出现特效*/
transition: opacity 3s ease-in-out; /*更换幻灯片时出现特效*/

opacity是透明度，调整去0.7也不错
3s 是有暗到明，历时3秒
可以换去1s，也是可以的

还有添加一个幻灯片激活后的透明度
当然透明度要放 1 ，就是没有透明度


.swiper-slide-active{
opacity:1; /*更换幻灯片时出现特效*/
}


看了，爽了一点点 是不是....
哈哈和...




下载完整源码：
swiper12.rar (534.74 KB, 下载次数: 2, 售价: 4 金钱)

2017-10-23 15:06 上传

点击文件名下载附件
售价: 4 金钱  [记录]

012（未完）

柒侠伍义

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第11章：键盘操作←→

是人都有欲望
欲望是无穷无尽的...
幻灯片制作已经差不多了
可以了....

但 发现有些幻灯片是可以在键盘操作左右的
这个功能swiper有吗？
哈哈和...

好的。非常简单
在下方...
<!-- Initialize Swiper -->
<script>加上...

游客，如果您要查看本帖隐藏内容请回复

就可以了
试一试看看...
是不是可以了
哈哈和...


011（未完）

柒侠伍义

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第10章：字体颜色问题


注意！注意！注意！
弄幻灯片我们要注意的细节太多了
也要考虑顾客观看的效果

我们来看看这张...



注意字的颜色和图片的颜色相近或吃眼力或刺眼
和这张比...8的不会刺眼





第7幻灯片字体颜色和照片
不符合颜色光学

无论我们换什么颜色或
无论我们换什么图片都会有1或2张
的图片和字体颜色相近

有一个办法可以解决这个问题
就是在字体上加《阴影》
css 是这样
text-shadow: 3px 3px 3px #000000;

我们就创造一个css
专门给字体用的吧！反正....
比如这样


.字体{
position: absolute; /*字体漂浮*/
text-shadow: 3px 3px 3px #000000;/*字体阴影及颜色*/
line-height: 10px; /*字体之间空隙*/
}

.大标题字{
font-size: 500%; /*字体大小*/
color: #FFFF00; /*字体颜色*/
}
.小标题字{
font-size: 300%; /*字体大小*/
color: #00FFFF; /*字体颜色*/
}


这回你自己加....
哈哈和....





010（未完）

sucre

柒侠伍义

主题：swiper幻灯片初级教程2018_柒侠伍义
作者：柒侠伍义（李易俸）
国家：马来西亚槟城
邮件：jh7x51@gmail.com
网站：liithong.com mt4ea.com mt5ea.com
面子书：facebook.com/liithong
版权保留 请勿转载
第09章：图片铺满窗口问题


图片有大有小
有长有短
各式各样的都有
没有统一...
轮播的时候不好看

能不能把图片
填充整个画面又不要失真

这个问题我研究了好久好久
结论是<img ......> 不能办到
唯一方法是....

游客，如果您要查看本帖隐藏内容请回复

搞定
漂亮啦！.......

是不是比刚才/以前版本的漂亮许多
好看许多....
哈哈和....






009（未完）

柒侠伍义

主题：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
一下子就搞定


下载源码（不包过图片）
swiper08.rar (25.89 KB, 下载次数: 0, 售价: 2 金钱)

2017-10-21 18:31 上传

点击文件名下载附件
售价: 2 金钱  [记录]  [购买]

008（未完）

柒侠伍义

主题：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

游客，如果您要查看本帖隐藏内容请回复

嗯.......
问题解决了
不错！不错！
哈哈和.....






007（未完）