jQuery带缩略图的轮播图插件PgwSlideshow

来源:https://www.sucaihuo.com/js/3080.html 2017-09-24 11:20浏览(3221) 收藏

一款jQuery带缩略图的轮播图插件PgwSlideshow,分为中间的大图区块和底部的缩略图区块,中间的大图区块可以按照一定的时间间隔自动轮播,或点击左右的箭头来切换大图,底部的缩略图可以点击来切换大图。
jQuery带缩略图的轮播图插件PgwSlideshow
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link rel="stylesheet" type="text/css" href="css/pgwslideshow.css">

页面的body部分,需设置好ul无序列表里的图片及说明内容等,代码如下:

<ul class="pgwSlideshow">
    <li><img src="images/a1.png" alt="秘密" data-description="吸引力法则"></li>
    <li><img src="images/a2.png" alt="要求、信念、接受"></li>
    <li><img src="images/a3.png" alt="" data-large-src="images/a3.png"></li>
    <li><img src="images/a4.png" alt=""></li>
    <li><img src="images/a5.png" alt=""></li>
    <li><img src="images/a6.png" alt=""></li>
    <li><img src="images/a7.png" alt=""></li>		
</ul>

页面的底部,需引入jQuery库和轮播插件,并对指定元素启用插件,代码如下:

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/pgwslideshow.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.pgwSlideshow').pgwSlideshow({
    	transitionEffect:'fading',
    	autoSlide:true
    });
});
</script>
评论0
头像

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

1 2