jQuery+ResponsiveSlides演示5中不同的幻灯片效果

收藏

ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器，在IE6中还支持最大宽度属性，但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

<ul class="rslides" id="dowebok">
    <li><img src="images/1.jpg" alt=""></li>
    <li><img src="images/2.jpg" alt=""></li>
    <li><img src="images/3.jpg" alt=""></li>
</ul>

引入jQuery库和responsiveslides相关组件：

<link rel="stylesheet" href="css/responsiveslides.css">
<script src="js/jquery.js"></script>
<script src="js/responsiveslides.min.js"></script>

jQuery

默认效果：

$(function() {
    $('#erdangjiade').responsiveSlides();
});

分页效果：

$(function() {
        $('#erdangjiade').responsiveSlides({
            pager: true,
            nav: true,
            namespace: 'centered-btns',
        });
});

缩略图

$(function() {
	$('#erdangjiade').responsiveSlides({
		manualControls: '#slider-pager'
	});
});

其他两种幻灯片演示效果，请下载压缩包，查看源代码。