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

柒侠伍义

主题：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（未完）

柒侠伍义

主题：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
版权保留 请勿转载
第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（未完）

thundersword

wangvsshen

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

wangvsshen

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

clan

通俗易懂哈

柒侠伍义

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



刚刚正欣赏幻灯片
发现手机滑动好迟钝...
要拉到一半（50%）的画面才去下一张
不好...这样不好
最好，拉10%啊 5%啊就可以跳第2张
这样还差不多...

嗯，不错，ORIGINAL的就是这样
我们来改一改

简单罢了
添加....copy && paste 下方java 就可以


//--------------滑动触发事件----------------------------------//

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

//--------------滑动触发事件----------------------------------//



嗯！现在试一试你的幻灯片
手动或滑鼠拉10%画面就跳第2幻灯片啦
爽吗？哈哈和...





013（未完）

柒侠伍义

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

如何在Swiper页面中禁止鼠标拖动，
同时能够用鼠标选择文本?

嗯 好的。
简单...copy & paste 下方java 就可以了

//-------------------------//

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

//-----------------//


是不是可以了
滑鼠拉不懂画面了
而且可以选择文本
可以copy文本啦～～～

哈哈和....
是不是很简单
哈哈和...






014（未完）
  

zheng490907365

顶lz！！！！！！！！！！！！！！！！！！！！！！！！！