jquery - 响应式幻灯片过渡看起来很奇怪

我包括一个reslideslides幻灯片放映，其中包含直接来自网页的标准设置。它可以工作，但是过渡看起来很奇怪。在采用正确尺寸之前，图像会填满屏幕的整个宽度。我还得到了除第一个图像以外的所有图像上的“ li-dot”。这可能已连接到CSS，但我找不到纠正它的方法。在这个问题上的任何帮助将不胜感激。

代码摘录

<%@ Page Title="XXX" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">

<script src="Scripts/responsiveslides.js"></script>

<script>
    $(function () {
        $(".rslides").responsiveSlides();
    });
</script>
<div>
   <ul class="rslides">
    <li><img src="Images/Slides/SAMS-1.png" /></li>
    <li><img src="Images/Slides/SAMS-2.png" /></li>
    <li><img src="Images/Slides/SAMS-3.png" /></li>

</ul>
</div>

的CSS

*! http://responsiveslides.com v1.54 by @viljamis */


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


.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  list-style-type: 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;
  }

最佳答案

我在这里的小提琴中尝试了您的代码：http://jsfiddle.net/aLy2D/1/（具有分页器和nav选项），一切都正常工作（嗯，我想是……）。

实际上，我在您的CSS代码中看到一个错字，也许您的问题来自这里：

*! http://responsiveslides.com v1.54 by @viljamis */

// Multiline comment should start with /*
/* http://responsiveslides.com v1.54 by @viljamis */

如果要显示寻呼机，则必须设置一个选项：

$(".rslides").responsiveSlides({
    pager: true
});

完整的文档可以在这里找到：http://responsiveslides.com/

编辑：我用document.ready方法更新了小提琴

关于jquery - 响应式幻灯片过渡看起来很奇怪，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20931473/