Question

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

<script type="text/javascript">
  $(".rslides").responsiveSlides({
    speed: 1000,
    maxwidth:1060
  });
</script>


<div class="container">
    <ul class="rslides">
        <li><img src="graphics/img1.png" alt=""></li>
        <li><img src="images/img2.png" alt=""></li>
        <li><img src="images/img3.png" alt=""></li>
    </ul>
</div>


.rslides {
    position:relative;
    list-style:none;
    overflow:hidden;
    width:100%;
    padding:0;
    margin:0;
}

.rslides li {
    -moz-border-backface-visibility:hidden;
    -o-border-backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border-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;
}

这是我从website rslides完全复制的代码，但不知道它运行不正确：它只显示第一张图片。

Answer 1

检查您是否正确添加了responsive.min.js

同时初始化document.ready function中的插件，使其完全加载，

$(document).ready(function() {
    $(".rslides").responsiveSlides({
        speed: 1000,
        maxwidth:1060
    });
});

我在fiddle尝试了它并且有效。

小提琴 http://jsfiddle.net/pYzfW/

更新完整代码

<html>
<head>
<style>
/*! http://responsiveslides.com v1.54 by @viljamis */

.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;
  }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
  $(function(){
    $.getScript('http://responsiveslides.com/responsiveslides.min.js',function(){
      $(".rslides").responsiveSlides({
       speed: 1000,
      maxwidth:1060
    });});
  });
</script>
</head>
<body>
  <div class="container">
      <ul class="rslides">
         <li><img src="http://responsiveslides.com/1.jpg" alt=""/></li>
         <li><img src="http://responsiveslides.com/2.jpg" alt=""/></li>
         <li><img src="http://responsiveslides.com/3.jpg" alt=""/></li>
      </ul>
  </div>

</body>
</html>

在检查之前，net connection js

需要jquery and responsive js

Answer 2

您需要在jQuery onready callback中包装您的responsiveSlides初始化。否则，在元素存在之前调用该代码，因此初始化不起作用。

$(function() {
    $(".rslides").responsiveSlides({
        speed: 1000,
        maxwidth:1060
    });
});

我的响应式幻灯片只显示第一张图片

2 个答案: