Question

我正在尝试复制以下演示，如下所示：

http://www.smoothdivscroll.com/#quickdemo

但是即使我复制了提供的代码，无论页面宽度/大小如何，我总是最终得到两行图片。如果有7张图片，其中6张将成为一行，第7张将位于该行的最左侧，并在我向左和向右滚动时循环显示。这是我正在使用的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
    <title>Page Title</title>
    <link rel="Stylesheet" type="text/css" href="jquery/css/smoothDivScroll.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.18.custom.min.js">    </script>
    <script type="text/javascript" src="jquery/js/jquery.mousewheel.min.js"></script>
    <script type="text/javascript" src="jquery/js/jquery.smoothdivscroll-1.2-min.js">    </script>


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

</head>
<body>


<div id="makeMeScrollable">
            <img src="jquery/images/demo/field.jpg" alt="Demo image" id="field" />
            <img src="jquery/images/demo/gnome.jpg" alt="Demo image" id="gnome" />
            <img src="jquery/images/demo/pencils.jpg" alt="Demo image" id="pencils" />
            <img src="jquery/images/demo/golf.jpg" alt="Demo image" id="golf" />
            <img src="jquery/images/demo/river.jpg" alt="Demo image" id="river" />
            <img src="jquery/images/demo/train.jpg" alt="Demo image" id="train" />
            <img src="jquery/images/demo/leaf.jpg" alt="Demo image" id="leaf" />
            <img src="jquery/images/demo/dog.jpg" alt="Demo image" id="dog" />
</div>

</body>
</html>

因此最终结果应该是单行滚动图片，在页面加载时开始自动滚动，然后在鼠标交互时立即停止，您可以使用侧箭头手动向左和向右滚动。

在视觉上，这是我应该得到的/我想要的（＆lt;＆gt;是侧面的滚动区域）

< [  ] [  ] [  ] [  ] >

这就是我得到的：

< [  ] [  ] [  ] >
  [  ]

希望这是有道理的。对此主题的任何帮助将不胜感激。我几乎都复制了页面本身，看看有什么不同，但在jQuery代码或HTML方面我仍然找不到任何重大差异。

编辑：更新了完整的页面源代码。

jQuery Div Scroll在多行而不是一行上显示图片

0 个答案: