0

SlidesJSを使用してスライダーを設定しようとしている簡単なWebページがあります。

これは、必要なファイルがHTMLページでリンクされる方法です。

<head>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
    <script type="text/javascript" src="js/slides.min.jquery.js"></script>
    <script type="text/javascript" src="js/common.js"></script> <!-- the JS function is in here -->
</head>

そして、loading.gifとpagination.pngをimagesフォルダーのimagesに入れました。

これはページのHTMLです。

<div id="container">
<div id="slider-space">
    <div class="slides-container">
        <div>
            <img src="http://i.imgur.com/kLMCP.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/aX675.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/UyE1g.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/uzc7c.png" />
        </div>
        <div>
            <img src="http://i.imgur.com/Zh8sQ.png" />
        </div>
    </div><!-- end of slides-container -->
</div><!-- end of slider-space -->
</div><!-- end of container -->

これがCSSです

#container {
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}

#slider-space {
    position:relative;
    margin-left:auto;
    margin-right:auto;
    margin-top:10%;
    width:500px;
    height:260px;
    background-color:#F96;    
}

.slides-container img {
    width:500px;
    height:260px;
}

.slides-container div {
    display:block;
    width:500px;
    height:260px;
}​
​

そしてこれがJavaScriptコードです

$(document).ready(function(e) {
    $('#slider-space').slides({
        preload: true,
        preloadImage: '/images/loading.gif',
        play: 5000,
        pause: 2500,
        hoverPause: false,
        pagination: true
    });
});

しかし、スライダーはまったく表示されません！画像はこのように上下に表示されているだけです、

ここに画像の説明を入力してください 誰かが私がここで欠けているものとそれを修正するために何をすべきかを教えてもらえますか？

どうもありがとう。

混乱しすぎる場合。理解を深めるには、こちらのフィドルをご覧ください。

編集 ：

さて、私はそれを機能させました。これで、スライドが正常に機能します。ただし、ページネーションにはわずかな問題があります。表示されるはずの小さな円は表示されません。数字だけ。以下を見てくださいここに画像の説明を入力してください

画像フォルダにpagination.pngを入れました。スクリプトなどでパスを設定する方法はありますか？

4

1 に答える 1

3

divクラスは「slides-container」ではなく「slides_container」にする必要があります-それを試してみてください。

ページネーションに関する新しい問題に対処するための編集：ページネーションに関連付けられているCSSがすべて欠落しています。ファイル内の「キャプション付きの画像」の例をご覧くださいglobal.css。

以下のCSSが必要です。

/*
    Pagination
*/

.pagination {
    margin:26px auto 0;
    width:100px;
}

.pagination li {
    float:left;
    margin:0 1px;
    list-style:none;
}

.pagination li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    background-image:url(../img/pagination.png);
    background-position:0 0;
    float:left;
    overflow:hidden;
}

.pagination li.current a {
    background-position:0 -12px;
}

background-imageご覧のとおり、次の属性でpagination.pngファイルのパスを設定できます。.pagination li a

于 2012-11-14T16:18:19.710 に答える