jQuery仿QQ空间相册插件

来源:https://www.sucaihuo.com/js/456.html 2015-08-28 16:18浏览(2983) 收藏

分享一个响应式相册插件,你可以自定义幻灯片最大高度,滑动效果,是否显示控制按钮,自动轮播或间隔时间。
jQuery仿QQ空间相册插件
分类:图片代码 > 图片轮播 难易:中级
查看演示 下载资源 下载积分: 20 积分
关注公众号,免费赠送安装视频教程、环境和学习视频,后面会不断更新。

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
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2