我无法使平滑滚动滑块在我的网站上工作答案

【问题标题】：I can't make the smooth scroll slider work on my site我无法使平滑滚动滑块在我的网站上工作
【发布时间】：2012-08-14 13:33:15
【问题描述】：

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

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

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

我对插件相当陌生，但我非常坚持希望这个滑块能够工作。

最后，我在我已经设置的 CSS 中使用了最后提到的代码（CSS）。它不起作用，我正在拔头发。我也尝试过使用其他人使用相同滑块的代码，但它不起作用。

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

【问题讨论】：

如果没有看到您的代码，我们无能为力。
该插件需要这 3 个库：jQuery, jQueryUI, jQueryMouseWheel.

标签： javascript jquery hover slider smooth

【解决方案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 :)），进入主菜单 > Save Page As > 选择 Web Page Complete (demo2.html)，浏览器将保存所有依赖项（库它需要）并将所有绝对链接转换为本地硬盘上的相对链接。我想这是让它发挥作用的最简单方法。

【讨论】：

【解决方案2】：

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

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

【讨论】：