Question

我是新来的，非常感谢我在这个在线社区中看到的所有帮助。

我的问题是关于jCarousel中的循环选项以及我遇到的问题。我有一个网站，我开始构建，我在其中一个页面上有一个问题的例子。到目前为止，这个网站已经很空了，不过就是这个例子。

现在代码 -

HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Howard Ray Davis - jCarousel practice</title>
<script src="../assets/js/jquery.js" type="text/javascript"></script>
<script src="../assets/js/jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $(".slider").jCarouselLite({
      visible: 1,
      auto: 1000,
      speed: 1000,
      scroll: 1
  });
});
</script>
<link href="../hrd.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="aa" style="text-align=: center;">
  <h1>jCarousel Practice</h1>
</div>
<div id="ba">
  <div id="bb">
    <div id="bc">
      <div class="slider">
          <ul>
            <li class="fl"><div style="width: 800px;height: 300px;background-color: #F00;"></div></li>
            <li class="fl"><div style="width: 800px;height: 300px;background-color: #666;"></div></li>
            <li class="fl"><div style="width: 800px;height: 300px;background-color: #0FF;"></div></li>
            <li class="fl"><div style="width: 800px;height: 300px;background-color: #C09;"></div></li>
           </ul>
      </div>
    </div>
  </div>
</div>
<div id="ya"></div>
<div id="za">
</div>
</body>
</html>

CSS：

@charset "utf-8";
* {
    margin: 0px;
    padding: 0px;
}
html {
    height: 100%;
}
body {
    position: relative;
    height: 100%;
}
#aa {
    width: 100%;
    height: 60px;
    background-color: #333;
    color: #FFF;
    text-align: center;
}
#ba {
    width: 100%;
}
#bb {
    width: 1000px;
    margin: auto;
}
#bc {
    width: 800px;
    margin: auto;
    overflow: hidden;
}
#ya {
    width: 100%;
    height: 40px;
    margin-top: 10px;
}
#za {
    width: 100%;
    height: 40px;
    position: absolute;
    bottom: 0px;
    background-color: #333;
}

非常感谢任何解决此问题的帮助！

Answer 1

看起来问题不在于您的CSS或JS。我去了你的示例网站并下载了你的HTML源代码，问题在于这段代码：

&nbsp;&nbsp;&nbsp;&nbsp;  <ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 4800px; left: -3286.26px;"><li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px; height: 300px; background-color: rgb(204, 0, 153);"></div></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #F00;"></div></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #666;"></div></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #0FF;"></div></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px;height: 300px;background-color: #C09;"></div></li>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<li style="overflow: hidden; float: left; width: 800px; height: 300px;" class="fl"><div style="width: 800px; height: 300px; background-color: rgb(255, 0, 0);"></div></li></ul>

HTML文件的第155-160行。我的猜测是你试图将&nbsp用作伪填充或边距。删除它们，只需将margin-top: 10px添加到div.slider，它就可以按预期工作。

jCarousel：当Circular设置为true时，First List Item在Last List Item之后向下移动

1 个答案: