Question

出于某种原因，我无法在我的投资组合网站上使用“平滑div滚动”... 我想知道是否有明显的事我做错了。这是我正在使用的教程的链接： http://www.smoothdivscroll.com/#howitworks

我使用头部演示中提到的顶级代码。

我使用了div之间提到的第二个代码，我将其标记为“因为这是我希望此滑块显示在”滑块“div中的位置。

我对插件很新，但我很想让这个滑块工作。

最后，我在已经设置的CSS中使用了最后提到的代码（CSS）。我很开心，我把头发拉了出来。我也尝试使用其他人的代码使用相同的滑块，但它不起作用。

请帮助，我很绝望！我需要完成这个网站:(

Answer 1

对于平滑滚动插件，这是完全正常的demo page。将以下html复制并粘贴到您的计算机上作为demo.html：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Smooth Div Scroll</title>
<link rel="Stylesheet" type="text/css" href="http://www.smoothdivscroll.com/css/smoothDivScroll.css" />
<style type="text/css">
#scroller {
  width:100%;
  height: 330px;
  position: relative;
}
#scroller div.scrollableArea img {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  user-select: none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js" type="text/javascript"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function() {
    $("#scroller").smoothDivScroll({
      mousewheelScrolling: true,
      manualContinuousScrolling: true,
      visibleHotSpotBackgrounds: "always",
      autoScrollingMode: "onstart"
    });
  });
</script>
</head>

<body>
  <div id="scroller">
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Demo image" id="field" />
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Demo image" id="golf" />
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="Demo image" id="river" />
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Demo image" id="train" />
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Demo image" id="dog" />
  </div>

</body>
</html>

现在在浏览器中打开此文件demo.html（推荐Firefox或Chrome :)），转到主菜单＆gt; Save Page As＆gt;选择Web Page Complete（demo2.html），浏览器将保存所有依赖项（它需要的库），并将所有绝对转换为本地硬盘上的相对链接。我认为这是如何使其正常运行的最简单方法。

Answer 2

我想热链接到我服务器上的脚本只是用于测试，但不要使用这些链接作为永久解决方案。

如果您下载zip with the latest version from GitHub我已经包含了一个测试页面，您应该可以单击并直接“开箱即用”。如果您想在本地运行演示，那么这是一个更好的解决方案。

我不能使平滑滚动滑块在我的网站上工作

2 个答案: