笔记本电脑或是台式机

互联网

ResponsiveSlides

在github上下载ResponsiveSlides.js，如下图所示。

解压ResponsiveSlides.js-master.zip文件，工程目录如下图所示。

新建工程目录，将responsiveslides.css、responsiveslides.min.js拷贝进来，分别放在新建的css和js文件夹。

引入文件

添加HTML标记

添加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;  }

调用API

API参数：$('.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: 回调之后的参数

浏览器支持：Internet Explorer 6,7,8,9Firefox 3,6,8,11Safari 5,5.1Chrome 15,20Opera 11,11.6iOS SafariSymbian 3 WebkitOpera Mobile 10.1Opera Mini for iOSIE7, IE9 MobileFirefox MobileAndroid 2.3+Kindle browser

特点：1.文件较小(通过缩减和gz压缩只有792字节)2.功能简单(ResponsiveSlides.js只支持三种模式：图片自动淡出淡入和使用页码标签，或者左右来手动切换图片。)

demo.css* {  margin: 0;  padding: 0;}html {  background: #222 url('images/bg.png') repeat;}body {  _width: 70%;  color: #888;  font: 14px/20px Helvetica, Arial, sans-serif;  margin: 20px auto 0;  max-width: 800px;  text-align: center;  text-shadow: 0 -2px 1px #000;  -webkit-font-smoothing: antialiased;  }h1 {  font: 40px/60px 'Helvetica Neue', Helvetica, Arial, sans-serif;  color: #fff;  font-weight: 200;  }h2 {  font: 16px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;  margin-bottom: 40px;  }#wrapper {  padding: 20px;  }p,h3,h4,pre {  text-align: left;  max-width: 540px;  margin: 0 auto 20px;  }.rslides {  margin: 0 auto 40px;  }#slider2,#slider3 {  box-shadow: none;  -moz-box-shadow: none;  -webkit-box-shadow: none;  margin: 0 auto;  }.rslides_tabs {  list-style: none;  padding: 0;  background: rgba(0,0,0,.25);  box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);  -moz-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.3), inset 0 0 5px rgba(0,0,0,1.0);  font-size: 18px;  list-style: none;  margin: 0 auto 50px;  max-width: 540px;  padding: 10px 0;  text-align: center;  width: 100%;  }.rslides_tabs li {  display: inline;  float: none;  margin-right: 1px;  }.rslides_tabs a {  width: auto;  line-height: 20px;  padding: 9px 20px;  height: auto;  background: transparent;  display: inline;  }.rslides_tabs li:first-child {  margin-left: 0;  }.rslides_tabs .rslides_here a {  background: rgba(255,255,255,.1);  color: #fff;  font-weight: bold;  }a {  color: #fff;  text-decoration: none;  }#download {  background: #333;  background: rgba(255,255,255,.1);  border: 1px solid rgba(255,255,255,.1);  border-radius: 5px;  -moz-border-radius: 5px;  -webkit-border-radius: 5px;  display: block;  font-size: 20px;  font-weight: bold;  margin: 60px auto;  max-width: 500px;  padding: 20px;  }#download:hover {  background: rgba(255,255,255,.15);  }.footer {  font-size: 11px;  }/* Callback example */h3 {  font: 20px/30px 'Helvetica Neue', Helvetica, Arial, sans-serif;  text-align: center;  color: #fff;  }.events {  list-style: none;  }.callbacks_container {  margin-bottom: 50px;  position: relative;  float: left;  width: 100%;  }.callbacks {  position: relative;  list-style: none;  overflow: hidden;  width: 100%;  padding: 0;  margin: 0;  }.callbacks li {  position: absolute;  width: 100%;  left: 0;  top: 0;  }.callbacks img {  display: block;  position: relative;  z-index: 1;  height: auto;  width: 100%;  border: 0;  }.callbacks .caption {  display: block;  position: absolute;  z-index: 2;  font-size: 20px;  text-shadow: none;  color: #fff;  background: #000;  background: rgba(0,0,0, .8);  left: 0;  right: 0;  bottom: 0;  padding: 10px 20px;  margin: 0;  max-width: none;  }.callbacks_nav {  position: absolute;  -webkit-tap-highlight-color: rgba(0,0,0,0);  top: 52%;  left: 0;  opacity: 0.7;  z-index: 3;  text-indent: -9999px;  overflow: hidden;  text-decoration: none;  height: 61px;  width: 38px;  background: transparent url('themes/themes.gif') no-repeat left top;  margin-top: -45px;  }.callbacks_nav:active {  opacity: 1.0;  }.callbacks_nav.next {  left: auto;  background-position: right top;  right: 0;  }#slider3-pager a {  display: inline-block;}#slider3-pager img {  float: left;}#slider3-pager .rslides_here a {  background: transparent;  box-shadow: 0 0 0 2px #666;}#slider3-pager a {  padding: 0;}@media screen and (max-width: 600px) {  h1 {    font: 24px/50px 'Helvetica Neue', Helvetica, Arial, sans-serif;    }  .callbacks_nav {    top: 47%;    }  }

案例1                  

案例1运行效果，如下图所示。

案例2                 

案例2，运行效果图，如下图所示。

ResponsiveSlides.js依赖JQuery，需要引入JQuery库

ResponsiveSlides.js实现了响应式