ResponsiveSlides.js是一个展示同一容器内图片的轻量级响应式jQuery幻灯片插件(tiny responsive slideshow jQuery plugin)。它支持包括IE6在内的几乎所有的浏览器,在IE6中还支持最大宽度属性,但在其它浏览器中并不原生支持。你需要做的只是链接jquery并且把图片裁剪为相同大小。
特点:
1.文件较小(通过缩减和gz压缩只有792字节)
2.功能简单(ResponsiveSlides.js只支持三种模式:图片自动淡出淡入和使用页码标签,或者左右来手动切换图片。)
浏览器支持:
Internet Explorer 6,7,8,9
Firefox 3,6,8,11
Safari 5,5.1
Chrome 15,20
Opera 11,11.6
iOS Safari
Symbian 3 Webkit
Opera Mobile 10.1
Opera Mini for iOS
IE7, IE9 Mobile
Firefox Mobile
Android 2.3+
Kindle browser
使用方法:
1. 引入文件
<script src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/responsiveslides.min.js"></script>
2. 添加HTML标记
<ul class="rslides" id=".MenuRslides"> <li><img src="1.jpg" alt=""></li> <li><img src="2.jpg" alt=""></li> <li><img src="3.jpg" alt=""></li> </ul>
3. 添加CSS
.rslides { position: relative; list-style: none; overflow: hidden; width: 100%; padding: 0; margin: 0; } .rslides li { -webkit-backface-visibility: hidden; position: absolute; display: none; width: 100%; left: 0; top: 0; } .rslides li:first-child { position: relative; display: block; float: left; } .rslides img { display: block; height: auto; float: left; width: 100%; border: 0; }
4. 调用
<script> $(function() { $(".rslides").responsiveSlides(); }); $(function() { $("#MenuRslides").responsiveSlides(); }); </script>
参数:
$(".rslides").responsiveSlides({ auto: true, // Boolean: 设置是否自动播放, true or false speed: 500, // Integer: 动画持续时间,单位毫秒 timeout: 4000, // Integer: 图片之间切换的时间,单位毫秒 pager: false, // Boolean: 是否显示页码, true or false nav: false, // Boolean: 是否显示左右导航箭头(即上翻下翻), true or false random: false, // Boolean: 随机幻灯片顺序, true or false pause: false, // Boolean: 鼠标悬停到幻灯上则暂停, true or false pauseControls: true, // Boolean: 悬停在控制板上则暂停, true or false prevText: "Previous", // String: 往前翻按钮的显示文本 nextText: "Next", // String: 往后翻按钮的显示文本 maxwidth: "", // Integer: 幻灯的最大宽度 navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul' manualControls: "", // Selector: 声明自定义分页导航 namespace: "rslides", // String: 修改默认的容器名称 before: function(){}, // Function: 回调之前的参数 after: function(){} // Function: 回调之后的参数 });
导航和分页
namespace:修改一下
$(function() { $('#MenuRslides').responsiveSlides({ pager: true, nav: true, namespace: 'centered-btns', }); });
还需要添加以下CSS
.centered-btns_nav { position: absolute; top: 50%; z-index: 2; width: 38px; height: 61px; margin-top: -40px; line-height: 200px; background-image: url(images/arrow.gif); overflow: hidden; opacity: .7;} .next { right: 0; background-position: right 0;} .centered-btns_nav:active { opacity: 1;} .centered-btns_tabs { margin-top: 15px; text-align: center; font-size: 0; list-style-type: none;} .centered-btns_tabs li { display: inline-block; margin: 0 3px; *display: inline; *zoom: 1;} .centered-btns_tabs a { display: inline-block; width: 9px; height: 9px; border-radius: 50%; line-height: 20px; background-color: rgba(0, 0, 0, .3); background-color: #ccc\9; overflow: hidden; *display: inline; *zoom: 1;} .centered-btns_tabs .centered-btns_here a { background-color: rgba(0, 0, 0, .8); background-color: #666\9;}
相关推荐
jQuery responsiveslides.js响应式图片轮播
jQuery轻量级响应式图片轮播插件ResponsiveSlides.js支持浏览器很全
jQuery轻量级跨平台响应式导航菜单插件Trunk.js是一款非常实用的实现轻量级响应式跨平台的jQuery导航菜单插件的代码。该插件会根据viewport的大小来重置导航菜单。在大屏幕设备中,导航菜单以常规的水平菜单展示,在...
jQuery网站图片切换插件responsiveslides是一款带左右箭头,索引按钮的自动轮播切换特效下载。
jQuery轻量级响应式幻灯片插件是一款提供了一个典型幻灯片所具备的所有功能,并且它使用简单,文件体积小,完全响应式设计,非常实用。
jQuery响应式图片无缝轮播插件
EasyFader — jQuery 轻量级响应式幻灯片插件简介EasyFader 是一款轻量级的响应式幻灯片插件,Gzip 压缩之后之后仅 1.5 KB。因为 EasyFader 是轻量级的,所以它并没有太多花哨的功能,但幻灯片的基本功能是一个都...
jquery响应式图片轮播插件,实例响应式的图片轮播,效果很赞
jQuery和CSS3响应式轮播插件jcSlider.zip
lightGallery是一款轻量级、可定制、响应式、模块化的jQuery LightBox图片画廊插件。它支持移动触摸设备,支持键盘控制,带20多种动画过渡效果,是一款非常优秀的LightBox插件。
ResponsiveSlides.js 是一个微型的 jQuery 插件用来创建响应式的幻灯展示效果,对 <ul> 标签中的图片进行自动幻灯展示,支持几乎所有浏览器包括 IE6。也可设置 max-width 属性并对 IE6 有效。
这是一款简单实用的jQuery响应式图片无缝轮播插件。该插件会将要轮播的图片制作为背景图片,它支持ie8 浏览器,具有无限、无缝轮播等特点。
jQuery响应式无限轮播图片代码.zip
基于jQuery全屏焦点图切换插件responsiveslides.zip
jQuery响应式移动端轮播图特效.zip