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

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

淘建站为您提供更多_图片代码_图片轮播_焦点图_幻灯片，在此特别感谢您对我们的支持与厚爱！

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() {
    $('#sucaiq').responsiveSlides();
});

分页效果：

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

缩略图

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

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