前言

今天用了一个图片显示插件highslide.js，用起来很舒服。我几乎不需要写代码，只需要知道如何写参数。

那么我们如何使用这样一个伟大的插件呢？下面我给你解释一下。

一.导言

首先，我们使用绝对路径导入，这通常是实际项目中引用的一种方法。当我们下载时，我们会有一个包含样式文件和脚本文件的文件包。

当您使用它时，您只需要引入这两个文件，然后代码如下：

link rel='样式表' type=' text/CSS ' href=' %=controller . getstatipath(request)%/js/high slide . CSS ' rel=' external no follow '/script type=' text/Javascript ' src=' http :%=controller。get static path(request)%/js/high slide-with-gallery . js '/脚本，我的项目是一个jsp文件，所以导入根目录的方式不一样，所以朋友们可以根据自己的项目来介绍一下。

那么我们要做的就是调用我们的插件并传入参数：

二、配置参数

以上是我的参数配置图

hs . GraphicsDir=' %=controller . GetStatiPath(请求)%/js/graphics/'；hs.align=“居中”；hs.transitions=['expand '，' cross ade ']；hs.wrapperClassName='深色无边框浮动标题'；hs.fadeInOut=真；hs.dimmingOpacity=0.75//如果(hs . addslideslided)hs . addslideslided({//slideshowgroup : ' group 1 '，interval: 5000，repeat: false，useControls: true，fixedControls: ' fit '，overlayooptions 3360 { opa city 3360 . 6，position: '底部中心'，hideOnMouseOut: true })则添加控制栏；除了文件地址，以上代码需要根据自己的路径进行配置。

三、如何展示

当插件配备好后，我们如何展示我们的图片？这个比较简单。

必须配置上图中几个箭头指示的方向。

1.最外层div的类名是highslide-gallery。在这种情况下，当我们完成图片显示时，这个div中的所有图片都将显示在转盘中。

2.图片外层要包裹一个A标签，A标签的地址应该是真实大图的地址，也就是要显示的图片的地址。然后单击事件onclick='return hs.expand(this)获取一个价格。如果不添加，点击将没有效果。

记得click事件return hs.expand(this)的写法，其实它可以完成一个小图片的点击来展现大图片播放的交互效果。当然也可以把图片改成文字或者别的，也可以完成点击显示的功能。让我们看看最后的结果。

第四，展示效果

这是在点击之前

这是点击后，它不是很简单。其实难点在于参数的配置，不过我已经配置好了，你可以很轻松的使用。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。