Question

我已经在网页上直接添加了带有标准设置的responsiveslides幻灯片。它有效，但过渡看起来很奇怪。在拍摄正确尺寸之前，图像会填满整个屏幕宽度。我也得到了所有图像上的“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;
  }

Answer 1

我在这里尝试了你的代码：http://jsfiddle.net/aLy2D/1/（带有寻呼机和导航选项），一切正常（好吧，我猜是这样......）。

实际上，我在你的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方法

更新了小提琴

Responsiveslides过渡看起来很奇怪

1 个答案: