链接

查看此网站：CDNJS

主持JS。对于ResponsiveSlides：http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js

Google云端硬盘托管： tutorial

来源（JSFiddle）

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Slider</title>




  <link rel="stylesheet" type="text/css" href="/css/result-light.css">


      <script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>



      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>


  <style type='text/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;
  }

#wrapper {
  float: left;
  width: 100%;
  margin-bottom: 50px;
  }

a {
  color: #222;
  }

.rslides_container {
  margin-bottom: 50px;
  position: relative;
  float: left;
  width: 100%;
  }

.rslides1_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 50%;
  left: 0;
  z-index: 99;
  opacity: 0.7;
  text-indent: -9999px;
  overflow: hidden;
  text-decoration: none;
  height: 61px;
  width: 38px;
  background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
  margin-top: -45px;
  }

.rslides1_nav:active {
  opacity: 1.0;
  }

.rslides1_nav.next {
  left: auto;
  background-position: right top;
  right: 0;
  }

.rslides2_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  top: 0;
  left: 0;
  display: block;
  background: #fff; /* Fix for IE6-9 */
  opacity: 0;
  filter: alpha(opacity=1);
  width: 48%;
  text-indent: -9999px;
  overflow: hidden;
  height: 91%;
  }

.rslides2_nav.next {
  left: auto;
  right: 0;
  }

.rslides3_nav {
  position: absolute;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  opacity: 0.6;
  text-indent: -9999px;
  overflow: hidden;
  top: 0;
  bottom: 0;
  left: 0;
  background: #000 url("themes.gif") no-repeat left 50%;
  width: 38px;
  }

.rslides3_nav:active {
  opacity: 1.0;
  }

.rslides3_nav.next {
  left: auto;
  background-position: right 50%;
  right: 0;
  }

.rslides1_nav:focus,
.rslides2_nav:focus,
.rslides3_nav:focus {
  outline: none;
  }

.rslides_tabs {
  margin-top: 10px;
  text-align: center;
  }

.rslides_tabs li {
  display: inline;
  float: none;
  _float: left;
  *float: left;
  margin-right: 5px;
  }

.rslides_tabs a {
  text-indent: -9999px;
  overflow: hidden;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background: #ccc;
  background: rgba(0,0,0, .2);
  display: inline-block;
  _display: block;
  *display: block;
  -webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
  width: 9px;
  height: 9px;
  }

.rslides_tabs .rslides_here a {
  background: #222;
  background: rgba(0,0,0, .8);
  }

.caption {
  position: absolute;
  display: block;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  text-align: center;
  background: #000;
  background: rgba(0,0,0, .8);
  color: #fff;
}
  </style>



<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
   $(function () {

      // Slideshow 1
      $("#slides1").responsiveSlides({
        auto: true,
        pagination: true,
        nav: true,
        fade: 500,
      });

    });
}//]]>  

</script>


</head>
<body>
  <div id="wrapper">

    <div class="rslides_container">
      <ul id="slides1" class="rslides">
        <li>
          <img src="http://responsiveslides.com/1.jpg" alt="" />
          <p class="caption">Donec id elit non mi porta gravida at eget metus.</p>
        </li>
        <li>
          <img src="http://responsiveslides.com/2.jpg" alt="" />
          <p class="caption">Donec ullamcorper nulla non metus auctor fringilla.</p>
        </li>
        <li>
          <img src="http://responsiveslides.com/3.jpg" alt="" />
          <p class="caption">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
        </li>
      </ul>
    </div>





</body>


</html>

定制

现在您可以通过编辑脚本和css轻松自定义：

可用选项（js）：

 $(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 500,            // Integer: Speed of the transition, in milliseconds
      timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: false,             // Boolean: Show navigation, true or false
      random: false,          // Boolean: Randomize the order of the slides, true or false
      pause: false,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "Previous",   // String: Text for the "previous" button
      nextText: "Next",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",     // Selector: Declare custom pager navigation
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){},   // Function: Before callback
      after: function(){}     // Function: After callback
    });

Answer 2

好了，无法使用您使用的代码，我将假设您在此处有类似的代码。如果是这样，Google云端硬盘托管必须使用https链接进行外部调用（即jQuery库调用;它必须是http，//并且http不起作用）

如果我在Google云端硬盘上托管我的网站，我该如何使用responsiveslides.js？

2 个答案:

链接

来源（JSFiddle）

定制