最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-06-12 08:00浏览(1504)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery+ResponsiveSlides演示5中不同的幻灯片效果
分类:图片代码 > 图片轮播 难易:初级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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'
	});
});

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

参数 描述 默认值
auto 自动播放 true
speed 动画持续时间,单位为毫秒 500
timeout 切换间隔,单位为毫秒 4000
pager 显示页码 false
nav 显示左右导航 false
random 随机幻灯片顺序 false
pause 鼠标悬停在幻灯片上暂停 false
pauseControls 鼠标悬停在控制器上暂停 true
prevText “上一个”按钮文本 Previous
nextText “下一个”按钮文本 Next
maxwidth 幻灯片最大宽度
navContainer 把控制项放入自定义选择器内
manualControls 声明自定义分页导航
namespace 修改默认的容器名称 rslides
before 切换前的回调函数
after 切换完成后回调函数
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/182.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    10-07 17:54
    ngu137
    功能挺齐全的啊。。。。、、、
1 2