0

http://www.smoothdivscroll.com/のサイトにあるスムーズな div スクローラーを使用しています。

なんらかの理由で機能していません。その理由はわかりません。私が得ているのは、スクロールしない固定画像のページだけです。ここに私のHTMLがあります:

<div id="makeMeScrollable">
<div class="scrollingHotSpotLeftVisible"></div>
<div class="scrollingHotSpotRightVisible"></div>
<div class="scrollWrapper">
    <div class="scrollableArea">
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
        <a href="#"><img src="some-image.png"/></a>
    </div>
</div>

これが私のスクリプトです：

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

これが私のCSSです：

a img {border: none; }

#makeMeScrollable
{
    width:75%;
    height:60px;
    position: relative;
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}
  #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

たぶん、私が見落としていたり​​、見ていなかったりする、本当に単純なことだと思いますが、しばらく経ちましたが、まだ理解できていません。

アップデート

これが私のコードのJsFiddleですどうもありがとう。

4

2 に答える 2

3

他のスクリプトの前にjqueryをロードしてみてください。

<script src="jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="jquery.smoothdivscroll-1.2-min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.18.custom.min.js"></script>
<link rel="stylesheet" type="text/css" href="smoothDivScroll.css" />
<script type="text/javascript">
    $(document).ready(function() {
        $("#makeMeScrollable").smoothDivScroll({ 
            mousewheelScrolling: true,
            manualContinuousScrolling: true,
            visibleHotSpotBackgrounds: "always",
            autoScrollingMode: "onstart"
        });
    });
</script>

また：

CSSコメントは正しいものであり、そうでは/*あり*/ません<!--/*

/* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */

アップデート：

あなたはいくつかの（明らかに重要な）cssを見逃しています：

http://jsfiddle.net/9HstK/2/

于 2012-06-27T18:01:13.230 に答える
0

コード スニペットとその Web サイトで提供されている例に基づいて、構造が間違っているようです。

「ドキュメンテーション」によると：

Smooth Div Scroll は、スクローラーの作成時に要素を追加します。これらの要素には CSS クラスが与えられます。ほとんどの場合、これらを変更する必要はありません。デフォルト値をそのまま使用してください。

これらの要素を手動で作成していることがスニペットに表示されます。これらの要素は、スクローラーの作成時に追加されます。

<!-- the CSS for Smooth Div Scroll -->
<link rel="Stylesheet" type="text/css" href="css/smoothDivScroll.css" />

<!-- Styles for my specific scrolling content -->
<style type="text/css">
    #makeMeScrollable
    {
        width:100%;
        height: 330px;
        position: relative;
    }

    #makeMeScrollable div.scrollableArea img
    {
        position: relative;
        float: left;
        margin: 0;
        padding: 0;
        /* If you don't want the images in the scroller to be selectable, try the following
           block of code. It's just a nice feature that prevent the images from
           accidentally becoming selected/inverted when the user interacts with the scroller. */
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -o-user-select: none;
        user-select: none;
    }
</style>


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

<!-- LOAD JAVASCRIPT LATE - JUST BEFORE THE BODY TAG 
     That way the browser will have loaded the images
     and will know the width of the images. No need to
     specify the width in the CSS or inline. -->

<!-- jQuery library - Please load it from Google API's -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

<!-- jQuery UI Widget and Effects Core (custom download)
     You can make your own at: http://jqueryui.com/download -->
<script src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>

<!-- Latest version of jQuery Mouse Wheel by Brandon Aaron
     You will find it here: http://brandonaaron.net/code/mousewheel/demos -->
<script src="js/jquery.mousewheel.min.js" type="text/javascript"></script>

<!-- Smooth Div Scroll 1.2 minified-->
<script src="js/jquery.smoothdivscroll-1.2-min.js" type="text/javascript"></script>

<!-- If you want to look at the uncompressed version you find it at
     js/jquery.smoothDivScroll-1.2.js -->


<!-- Plugin initialization -->
<script type="text/javascript">
    // Initialize the plugin with no custom options
    $(document).ready(function () {
        // None of the options are set
        $("div#makeMeScrollable").smoothDivScroll({});
    });
</script>

于 2012-06-27T18:02:59.063 に答える