分享一个响应式相册插件,你可以自定义幻灯片最大高度,滑动效果,是否显示控制按钮,自动轮播或间隔时间。
pgwslideshow相册插件有以下特点
<ul class='ul_demo'> <li>支持响应式</li> <li>支持桌面和移动设备</li> <li>代码简单,只有4kb不到</li> </ul>
HTML
首先我们在.pgwSlideshow放置多个缩略图
<ul class="pgwSlideshow">
<li><img src="img/dakar.jpg" alt=""></li>
<li><img src="img/toronto.jpg" alt=""></li>
<li>
<a href="http://www.sucaihuo.com/js" target="_blank">
<img src="img/monaco.jpg" alt="jQuery特效">
</a>
</li>
</ul>
引入pgwslideshow.js相册插件
<script type="text/javascript" src="js/pgwslideshow.min.js"></script>
默认效果
$(function() {
$('.pgwSlideshow').pgwSlideshow();
});
pgwSlideshow中文API
参数 | 描述 | 默认值 |
mainClassName | 重写幻灯片CSS类 | pgwSlideshow |
transitionEffect | 2个转换效果:“sliding滑动”或“fading淡入淡出”。 | sliding |
autoSlide | 是否支持自动轮播 | false |
beforeSlide | 函数:在滑动之前 | false |
afterSlide | 函数:在滑动之后 | false |
displayList | 自定义显示选项列表 | true |
displayControls | 是否显示控制按钮 | true |
touchControls | 是否支持移动设备触摸 | true |
maxHeight | 幻灯片最大高度 | - |
transitionDuration | 过渡效果 | 500 |
intervalDuration | 间隔时间 | 3000 |
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791