一、什么是jqDisplay
jqDisplay是一个jQuery插件，可以帮助我们轻松实现图片渐变过渡效果，使网站页面更加美观，对于图片展示效果提升很大。
引入jqDisplay的JS文件后，我们可以使用简单的代码就实现了图片渐变过渡效果，不用太多CSS代码就可以实现我们需要的效果。
二、如何使用jqDisplay
使用jqDisplay非常简单，我们只需要引入jquery.js和jqDisplay.js两个文件，在HTML中用class或id给需要实现图片渐变过渡效果的区域进行标记，在js中写入以下代码即可：
$(function(){
$('.myGallery').jqDisplay({
width: 800, // 图片宽度
height: 400, // 图片高度
delayTime: 3000, // 每张图片停留的时间
fadeTime: 1000, // 图片过渡的时间
numButtons: true, // 是否显示图片序号
autoPlay: true, // 是否自动播放
effect: 'fade' // 过渡效果，除了默认的fade，还可以设置为slide和nonsupport
});
});
以上代码表示我们以“myGallery”为class的区域将会实现图片渐变过渡效果，具体的细节可以参照注释的说明进行设置。
三、使用注意事项
虽然jqDisplay的使用足够简单，但是在使用中还有几个注意事项需要我们留意：
1、区域大小问题
需要注意的是，在使用jqDisplay的时候，要保证插件所绑定的区域大小为指定的width和height属性中设置的大小，否则图片的渐变效果会不尽人意。
2、图片尺寸问题
另外，在使用jqDisplay的过程中，要确保每个图片的尺寸都一样，否则页面会出现问题，而且这个问题比第一个问题更严重，容易产生流布局导致错乱甚至溢出。
3、不支持IE浏览器
最后，该插件不支持IE浏览器，在IE11以下版本（包括IE11）中，图片就是普通的轮播，过渡效果不支持。
四、总结
总地来说，使用jqDisplay能够让网站页面的图片展示效果更加绚丽，使用的步骤也非常简单，只要按照以上的步骤引入插件并按照注释进行设置即可。但是在具体使用中仍然要注意一些细节，比如区域大小问题、图片尺寸问题等等。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270022.html
微信扫一扫 
支付宝扫一扫 