jQuery的图片轮播插件PgwSlideshow使用详解(2)

var pgwSlideshow = $('.pgwSlideshow').pgwSlideshow(); //获取轮播插件对象 pgwSlideshow.startSlide(); //控制轮播插件开始轮播 pgwSlideshow.stopSlide(); //控制轮播插件停止轮播 pgwSlideshow.getCurrentSlide(); //获取当前轮播图片的序号 pgwSlideshow.getSlideCount(); //获取当前轮播插件包含的图片个数 pgwSlideshow.displaySlide(3); //通过参数中的数值来显示指定序号的轮播图图片 pgwSlideshow.nextSlide(); //显示下一幅图片 pgwSlideshow.previousSlide(); //显示前一幅图片 pgwSlideshow.destroy(); //销毁轮播图对象。可通过可选的参数控制，如果传入参数true，那么容器只是被隐藏起来 pgwSlideshow.reload({ //使用新的配置参数来重新加载轮播图插件 transitionEffect: 'fading', adaptiveDuration: 4000 });

1.4 加载服务端数据

加载服务端数据同样很简单，只需要根据服务端返回的数据，动态构造li标签，然后添加的ul元素中，接着调用pgwSlideshow()就行了。

<ul></ul> $(function () { var pictures = JSON.parse($("#anchorPictures").val()); //此处一般用ajax接受服务端返回数据 var html = "" $.each(pictures, function (i, item) { html += "<li><img src='" + item.AttachmentUrl + "' data-large-src='" + item.AttachmentUrl + "' alt='" + item.AttachmentName + "' data-description='" + item.AttachmentName + "'></li>"; }); $("#pictureBox").html(html); $('.pgwSlideshow').pgwSlideshow(); });

以上所述是小编给大家介绍的jQuery的图片轮播插件PgwSlideshow使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章: