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

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

分页效果：

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

缩略图

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

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