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实现文章图片弹出放大效果
Apr 06 jQuery
Django1.7+JQuery+Ajax验证用户注册集成小例子
Apr 08 jQuery
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
Jun 01 jQuery
jQuery实现简单的手风琴效果
Apr 17 jQuery
jQuery实现拖动效果的实例代码
Jun 25 jQuery
一个有意思的鼠标点击文字特效jquery代码
Sep 23 jQuery
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
jQuery带控制按钮轮播图插件
Jul 31 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery实现购物车全功能
Jan 11 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
PHP5 面向对象(学习记录)
2009/12/02 PHP
PHP关联数组的10个操作技巧
2013/01/21 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP检测用户语言的方法
2015/06/15 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
jQuery 名称冲突的解决方法
2011/04/08 Javascript
javascript模版引擎-tmpl的bug修复与性能优化分析
2011/10/23 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
使用ajax+jqtransform实现动态加载select
2014/12/01 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
详解VUE里子组件如何获取父组件动态变化的值
2018/12/26 Javascript
vue两组件间值传递 $router.push实现方法
2019/05/15 Javascript
在Django的模型中添加自定义方法的示例
2015/07/21 Python
python 读取DICOM头文件的实例
2018/05/07 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Python如何获取文件指定行的内容
2020/05/27 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
Python Django路径配置实现过程解析
2020/11/05 Python
Python爬虫获取op.gg英雄联盟英雄对位胜率的源码
2021/01/29 Python
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Booking.com西班牙:全球酒店预订
2018/03/30 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
为什么UNION ALL比UNION快
2016/03/17 面试题
《狮子和兔子》教学反思
2014/03/02 职场文书
人力资源主管职责范本
2014/03/05 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
音乐教师求职信范文
2015/03/20 职场文书
Maven学习----Maven安装与环境变量配置教程
2021/06/29 Java/Android