一款jQuery带缩略图的轮播图插件PgwSlideshow,分为中间的大图区块和底部的缩略图区块,中间的大图区块可以按照一定的时间间隔自动轮播,或点击左右的箭头来切换大图,底部的缩略图可以点击来切换大图。
页面的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>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791