jquery - 如何为 smoothDivScroll 制作按钮

Question

我想使用标签制作 2 个简单的可点击链接，以使用 Thomas Kahn 的 JQuery SmoothDivScroll 更改幻灯片的滚动方向。我想让向右和向左的滚动方向都成为可点击的链接，但不知道该怎么做。任何人都可以帮忙吗？

到目前为止我的代码在http://www.festifood.nl/test.html

谢谢

Answer 1

下面是一种代码：

 <script type="text/javascript">
        $(document).ready(function() {
            $("#makeMeScrollable").smoothDivScroll({ 
                mousewheelScrolling: true,
                manualContinuousScrolling: true,
                visibleHotSpotBackgrounds: "always",
                autoScrollingMode: "onstart"
            });
        });
    </script>

此链接下方显示了该代码的外观以及如何对其进行编码：

http://www.smoothdivscroll.com/

Answer 2

下面是它的工作原理。在“$(document).ready(function(){”函数的末尾添加：

$("#right").click(function() {
  $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","right");
});

$("#left").click(function() {
  $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","left");    
});

$("#backandforth").click(function() {
  $("#makeMeScrollable").smoothDivScroll("option","autoScrollDirection","backandforth");    
});

好的，那有什么作用？

1. 您将 ID 的跨度定义为“左”、“右”等（例如<span id="left">left</span>）。在 jQuery 中，您可以通过选择器选择它们，该选择器是描述要选择的内容的字符串。要按 ID 选择元素，字符串以“#”开头，后跟 ID。要执行选择器，请使用 $(selector) as $("#left") 来选择 id="left"; 的 <span>-Tag;
2. 我们想为这个选定的元素分配一个点击事件的处理函数。所以我们写$("#left").click( ... );。作为参数，我们放入一个不带参数的函数，当点击 <span> 时将执行该函数。
3. 在该事件处理函数中，我们更改了 smoothDivScroll 的选项。

更多信息

• 这些选项在这里解释：http ://www.smoothdivscroll.com/options.html
• 此处解释了如何更改选项：http ://www.smoothdivscroll.com/alteringOptions.html

单击与 OnMouseOver

如果您想对鼠标悬停事件做出反应，只需编写.mouseover(...)而不是.click(...)

另外：您的 CSS 中的错误？

您还应该修复您的 CSS，添加一个“;” 后面330px；和一个“浮动：左；”：

#makemescrollable {
  position: relative;
  width: 100%;
  height: 330px;
  float: left;
}