jQuery中图片展示插件highslide.js的简单dom


Posted in jQuery onApril 22, 2018

前言

今天用用了一款图片展示插件highslide.js,感觉用起来很是舒畅,几乎不用怎么写代码,只需要知道如何写参数就行了。

那么这么牛叉的插件我们该如何用哪,下面我就跟大家讲解一下。

一、引入

首先我们运用绝对路径引入,这一般都是在实际项目中引用的方法,我们下载时候会有个文件包,里面包含样式文件和脚本文件。

jQuery中图片展示插件highslide.js的简单dom

jQuery中图片展示插件highslide.js的简单dom

用的时候只需引入这两个文件即可,然后代码中这样写:

<link rel="stylesheet" type="text/css" href="<%=controller.getStaticPath(request)%>/js/highslide.css" rel="external nofollow" />
<script type="text/javascript" src="<%=controller.getStaticPath(request)%>/js/highslide-with-gallery.js"></script>

我这项目是jsp文件,所以说引入的根目录的方式不同,小伙伴们可以根据自己的项目来具体如何引入吧。

然后我们要做的是调用我们的插件,传入参数:

jQuery中图片展示插件highslide.js的简单dom

二、配置参数

上面是我的参数配置图

hs.graphicsDir = '<%=controller.getStaticPath(request)%>/js/graphics/';
  hs.align = 'center';
  hs.transitions = ['expand', 'crossfade'];
  hs.wrapperClassName = 'dark borderless floating-caption';
  hs.fadeInOut = true;
  hs.dimmingOpacity = 0.75;

  // Add the controlbar
  if (hs.addSlideshow) hs.addSlideshow({
   //slideshowGroup: 'group1',
   interval: 5000,
   repeat: false,
   useControls: true,
   fixedControls: 'fit',
   overlayOptions: {
    opacity: .6,
    position: 'bottom center',
    hideOnMouseOut: true
   }
  });

上面的代码除了文件地址需要根据自己的路径配置外,其他的都可以不用改变。

三、如何展示

插件配备好了我们该如何将我们的图片展示出来哪,这个更简单了。

jQuery中图片展示插件highslide.js的简单dom

上图几个箭头指示的方向是一定要配置的。

1、最外层div的类名要是highslide-gallery,这样的话我们完成的图片展示就轮播会展示这层div内的所有图片。

jQuery中图片展示插件highslide.js的简单dom

2、图片外层要包裹一个A标签,并且A标签的地址要是真正大图的地址,也就是要展示图片的地址。然后在给A价格点击事件onclick="return hs.expand(this) ,不加的话会使点击没有效果。

jQuery中图片展示插件highslide.js的简单dom

记住点击事件的写法return hs.expand(this) ,其实这样就能完成一个小图点击展示大图播放的交互效果了。当然也可以把图片改成文字或其他的,这样也能完成点击展示的功能。下面就给大家看一下最终的效果吧。

四、展示效果

jQuery中图片展示插件highslide.js的简单dom

这是点击前

 jQuery中图片展示插件highslide.js的简单dom

这是点击后,是不是很简单。其实难点在于配置参数,但是我已经配置了,所以各位大大就很轻松的使用吧。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

jQuery 相关文章推荐
jquery实现提示语淡入效果
May 05 jQuery
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
jQuery dateRangePicker插件使用方法详解
Jul 28 jQuery
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
jQuery实现消息弹出框效果
Dec 10 jQuery
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
手写简单的jQuery雪花飘落效果实例
Apr 22 #jQuery
JQuery元素快速查找与操作
Apr 22 #jQuery
关于jquery layui弹出层的使用方法
Apr 21 #jQuery
jQuery中的for循环var与let的区别
Apr 21 #jQuery
jQuery中的$是什么意思及 $. 和 $().的区别
Apr 20 #jQuery
通过jquery获取上传文件名称、类型和大小的实现代码
Apr 19 #jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 #jQuery
You might like
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
Yii2验证器(Validator)用法分析
2016/07/23 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
jquery CSS选择器笔记
2010/03/29 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
2011/07/11 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
jQuery实现菜单式图片滑动切换
2015/03/14 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JS实现鼠标滑过显示边框的菜单效果
2016/09/21 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
纯js实现页面返回顶部的动画(超简单)
2017/08/10 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
2017/12/20 Javascript
Vue.js实现可排序的表格组件功能示例
2019/02/19 Javascript
微信小程序Echarts图表组件使用方法详解
2019/06/25 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[01:02:53]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第二局
2016/03/06 DOTA
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
python实现控制电脑鼠标和键盘,登录QQ的方法示例
2019/07/06 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
MaBelle玛贝尔香港官网:香港钻饰连锁店
2019/09/09 全球购物
传媒专业推荐信范文
2013/11/23 职场文书
应聘自荐信
2013/12/14 职场文书
文明城市标语
2014/06/16 职场文书
设立有限责任公司出资协议书
2014/11/01 职场文书
小学音乐课歌曲《堆雪人》教学反思
2016/02/18 职场文书