2

ここに見られるように、私は次のデモを複製しようとしています:

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

しかし、提供されたコードをコピーしても、ページの幅/サイズに関係なく、常に 2 行の画像になります。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>

したがって、最終結果は、ページが読み込まれると自動スクロールが開始され、マウスの操作があるとすぐに停止する、スクロールする画像の 1 行になるはずです。横の矢印を使用して手動で左右にスクロールできます。

視覚的に、これは私が得るべきもの/私が望むものです（<>は横のスクロール領域です）

< [  ] [  ] [  ] [  ] >

そして、これは私が得ているものです:

< [  ] [  ] [  ] >
  [  ]

うまくいけば、それは理にかなっています。この件に関するヘルプは大歓迎です。違いを確認するためにページ自体をほとんどコピーしましたが、jQuery コードまたは HTML に関しては、まだ大きな矛盾を見つけることができません。

編集: 完全なページのソース コードで更新されました。

4

0 に答える 0