jQuery配合coin-slider插件制作幻灯片效果的流程解析


Posted in Javascript onMay 13, 2016

今天为了做一个模板,来收集幻灯片插件,最终确定了两款比较合适的。coin-slider和nivoslider,为此,研究了一下午,从各个方面来实验这两款插件,究竟哪款比较适合、比较好。

当然,聪明的你看题目就已经知道了。我必须要吐槽一下nivoslider这个jquery插件。这两款插件,在看官方的demo时,这个插件的效果要比coin-slider好一些。看了一下教程,可以自定义的参数较多,貌似功能要更强大一下。于是我就首先研究了一下这款插件的使用方法。由于网上教程比较少,大部分都是直接复制的官方教程,我就直接拿官方的demo代码来看了。这一看,直接晕死。加载了N个css文件,以及各种图片文件,当场晕死。demo里面的代码,也是很多很乱,不是怕多、乱的代码,就怕引用的各种文件各种效果的叠加,分析起来累死个人。

干脆自己按照步骤,自己写个小demo,看一下这款插件的易用性怎么样。按照官方的步骤,写好了图片链接,加载了需要的javascript文件等。打开一看,立刻没有了官方demo的美观和强大,上面的翻页等,都是需要css定义,这个暂时没有管理,所以难看就难看吧。图片切换也算正常,不正常的地方就是,在某个地方,出现了下一张图片的一大堆图片块。这种切换的原理很简单,生成很多div,每个div用css中的background-position属性,把整体的图片切成块,然后对每块进行透明度等的变化,显示的效果就是你看到的那种。但是现在,在旁边出现了一堆块都是乱的,直接无语。具体什么情况,我已经删了,也不截图了。估计是某块css没有定义好,当我打开官方demo的css时,又怵头了,这么多,这么乱的代码。功能的强大,必定面临使用的难度提升,估计这个是给专家级用户使用的,我等小白还是趁早溜走吧。研究了两三个小时,无疾而终。转身向coin-slider走去。

先在网上搜索一下相关资料,某前辈已经写出了一个教程,并且自己做了一个demo,下载下来看了下,效果挺好,代码挺少。同时也下载了官方的demo,打开官方demo,下面的说明,说的清清楚楚的。简而言之就是:加载必备组件=》你自己写图片链接=》执行那个操作。实事也是如此,可能我之前研究nivoslider,而coin-slider和它的原理和操作类似,所以我很快就上手并且做出了自己想要的效果。下面来依次讲解:

1,加载必备组件

这个coin-slider是jquery的一个插件,开源项目地址:https://github.com/kopipejst/coin-slider

当然,离不开jquery。所以我们要加载三个项目:jquery、coin-slider和coin-slider-styles.css这三个。后面两个就是这个插件包,最后的那个css文件,是用来格式化幻灯片的相关样式。我估计nivoslider就是因为缺少了一个这个,所以才导致的乱,也有可能是我没有发现这个东西。代码如下:

<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”coin-slider.min.js”></script>
<link rel=”stylesheet” href=”coin-slider-styles.css” type=”text/css” />

2,编写你的图片链接
我们首先需要指定一个带有id的div标签,这样在第三步执行的时候,插件才能找到我们想要播出的图片。它的图片的写法,也有几个特点,就是如果你想点击图片跳转到某链接,在外面加上a标签;在img标签后面,新建一个span标签,里面的内容,将会作为图片的说明文字出现。直接看代码:

<div id=”coin-slider”>
 <a href=”#” >
  <img src=”images/walle.jpg” >
  <span>
   Description for nem<br />oDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemoDescription for nemo
  </span>
 </a>
 <a href=”#111”>
  <img src='images/nemo.jpg' > //加载的图片
  <span> //图片对应的说明
   Description for nemo
  </span>
 </a>
</div>

这个代码的大体框架,是我从官方的demo中提取出来的,这里我又要吐槽一下了,官方的demo文件,写的实在是太不规范了,html标签都用的是大写,而且从上面的img的src就可以看出来,他们竟然用了单引号!css文件里也是这样,患有代码强迫症的潜行者m,花了好几分钟,才把大部分代码变成小写,添加合适的换号,真无语。看了一下开发时间,2010年的作品,那时候xhtml应该普及了,为什么还用大写的写法,无语了。
3,执行操作

确保上面两个步骤完成之后,就需要触发它的方法,来实现幻灯片的功能了。方法当然是

$(document).ready(function() {
  $(‘#coin-slider').coinslider({ height:248 }); //使用各种参数配置来扩充他的功能
 });

当然,你也可以使用window.onload,那样可以确保幻灯片图片被完全下载下来之后,再出现幻灯片。
很显然,还可以配置很多参数,让幻灯片的功能更加强大。在上面的代码中,我添加了一个参数height:248,因为我的照片高度是248px。下面介绍一下其他参数,我在官方注释后面,小小的翻译了一下,不准确的话,还望见谅。

width: 565, // width of slider panel 幻灯片的宽度
height: 290, // height of slider panel 幻灯片的高度
spw: 7, // squares per width 幻灯片切出小方框的宽度
sph: 5, // squares per height 幻灯片切出小方框的高度
delay: 3000, // delay between images in ms 切换图片的时间,毫秒单位
sDelay: 30, // delay beetwen squares in ms 小方框变化的时间,毫秒单位(这两个尽量不要改,官方说改了容易出现过度问题)
opacity: 0.7, // opacity of title and navigation 图片下面的说明文字背景的透明度
titleSpeed: 500, // speed of title appereance in ms 标题消失的速度,毫秒单位
effect: ‘', // random, swirl, rain, straight 变换样式,随机,漩涡,下雨,连续(自己试试就知道效果)
navigation: true, // prev next and buttons 是否显示前个、后个按钮
links : true, // show images as links 是否把图片当做一个链接
hoverPause: true // pause on hover 你把鼠标放上去的时候,图片是否继续变化

我们只需要像这样,填上自己定义的参数即可:

$(‘#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });

4,高级用法
在具体的使用过程中,它的默认样式,肯定不符合我的模板需求,所以我需要对它进行更加细致的修正。那就是通过css,官方的css文件里,你可以直接修改,你也可以新建css文件,对它进行定义。在火狐浏览器中,可以方便观看这个插件生成了些什么div标签,以及相应的id和class。既然你是高级用户,当然难不倒你,我只是在这里提一个思路,具体的就要靠你自己去修改了。

Javascript 相关文章推荐
通过js脚本复制网页上的一个表格的不错实现方法
Dec 29 Javascript
转一个日期输入控件,支持FF
Apr 27 Javascript
Firefox+FireBug使JQuery的学习更加轻松愉快
Jan 01 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
Mar 27 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
vue对storejs获取的数据进行处理时遇到的几种问题小结
Mar 20 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
小程序日历控件使用方法详解
Dec 29 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 #Javascript
浅析JS操作DOM的一些常用方法
May 13 #Javascript
javascript判断图片是否加载完成的方法推荐
May 13 #Javascript
jQuery Easyui 验证两次密码输入是否相等
May 13 #Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 #Javascript
Javascript基础之数组的使用
May 13 #Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 #Javascript
You might like
使用php shell命令合并图片的代码
2011/06/23 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
php 字符串压缩方法比较示例
2014/01/23 PHP
php-beanstalkd消息队列类实例分享
2017/07/19 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
jQuery对象和Javascript对象之间转换的实例代码
2013/03/20 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
jquery代码实现简单的随机图片瀑布流效果
2015/04/20 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
基于jquery实现动态竖向柱状条特效
2016/02/12 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
javascript实现获取图片大小及图片等比缩放的方法
2016/11/24 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
JavaScript异步操作的几种常见处理方法实例总结
2020/05/11 Javascript
详解JavaScript中的链式调用
2020/11/27 Javascript
python保存字符串到文件的方法
2015/07/01 Python
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python中的枚举类型示例介绍
2019/01/09 Python
PyQt5 QTable插入图片并动态更新的实例
2019/06/18 Python
Python操作qml对象过程详解
2019/09/26 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
编写python代码实现简单抽奖器
2020/10/20 Python
IRO美国官网:法国服装品牌
2018/03/06 全球购物
NICKIS.com荷兰:设计师儿童时装
2020/01/08 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
2014年组织委员工作总结
2014/12/01 职场文书
春秋淹城导游词
2015/02/11 职场文书
环保建议书作文400字
2015/09/14 职场文书
2019年妇科护士的自我鉴定(3篇)
2019/09/26 职场文书