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 相关文章推荐
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
Apr 29 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
微信小程序 网络API 上传、下载详解
Nov 09 Javascript
理解javascript async的用法
Aug 22 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
javascript之分片上传,断点续传的实际项目实现详解
Sep 05 Javascript
vscode中eslint插件的配置(prettier配置无效)
Sep 10 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教程 预定义变量
2009/10/23 PHP
javascript 对表格的行和列都能加亮显示
2008/12/26 Javascript
nodejs win7下安装方法
2012/05/24 NodeJs
js获取GridView中行数据的两种方法 分享
2013/07/13 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
javascript运算符——位运算符全面介绍
2016/07/14 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
JavaScript this绑定过程深入详解
2018/12/07 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
基于Fixed定位的框选功能的实现代码
2019/05/13 Javascript
Python常用模块介绍
2014/11/21 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
pandas使用get_dummies进行one-hot编码的方法
2018/07/10 Python
python学习——内置函数、数据结构、标准库的技巧(推荐)
2019/04/18 Python
python无序链表删除重复项的方法
2020/01/17 Python
解决 jupyter notebook 回车换两行问题
2020/04/15 Python
Python matplotlib可视化实例解析
2020/06/01 Python
基于TensorFlow的CNN实现Mnist手写数字识别
2020/06/17 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
校园活动策划书范文
2014/01/10 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
python scrapy简单模拟登录的代码分析
2021/07/21 Python
Python使用Opencv打开笔记本电脑摄像头报错解问题及解决
2022/06/21 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python