0

SlidesJS jQueryプラグインを使用して呼び出しています

jQuery.slides();

ただし、これは正しく機能していません。代わりに、画像はすべて表示されています (プラグインなしで期待されるように)。

なぜこれが機能しないのですか?どうすればこれを機能させることができますか?

alert()テストのためにスライド（）ステートメントの上下に配置したため、JavaScriptが実行されていると確信しています。

ここに私のマークアップがあります:

<div class="slides">
    <div class="slides_container">
        <div>
            <img src="Images/sample_banner.png" />
        </div>
        <div>
            <img src="http://placehold.it/984x111" />
        </div>
        <div>
            <img src="http://placehold.it/984x111/ff0000" />
        </div>
    </div>
</div>


 <div class="left_arrow"><a href="#"><img src="Images/left_arrow.png" alt="left arrow control" /></a></div>
 <div class="right_arrow"><a href="#"><img src="Images/right_arrow.png" alt="right arrow control" /></a></div>

ここに私のCSSがあります:

.banner
{
    width:984px;
    border-left:solid 7px #FFFFFF;
    border-right: solid 7px #FFFFFF;    
    z-index:1;
    position:relative;
}

    .banner .slides
    {
    }
        .banner .slides .slides_container {
            width:984px;
            height:111px;
        }
            .banner .slides .slides_container div
            {
                width:984px;
                height:111px;
                display:block;
            }


.left_arrow
{
    position:absolute;
    z-index:2;
    width:25px;
    left:0px;
    top:38px;

}

.right_arrow
{
    position:absolute;
    z-index:3;
    width:25px;
    left:960px;
    top:38px;
}

これが私のJSです：

$(document).ready(function () {
        $('.slides').slides({
           next: 'right_arrow'
           , prev: 'left_arrow'
           , pagination: false
         });
    });
4

3 に答える 3

2

あなたの質問は基本的に解決されますが。それから、レイアウトには他にもいくつかの問題がありました。

  1. .banner .slidesがない場合、どのように適用できます<div class="banner" />か?
  2. 矢印の配置が間違っていて、CSS が最適ではありませんでした
  3. 非常に多くの場所で幅や高さを設定する必要はありません
  4. あなたはそれを望んでいませんでしたが、ページネーションはまだ表示されていました
  5. 矢印と z-index に関する奇妙な問題

そして、私が修正した小さな問題がさらにあり、コードを最適かつドライにしました。

私の例: http://jsfiddle.net/hobobne/RSncf/1/

于 2011-10-06T10:07:05.677 に答える
1

JavaScript で ID #slidesをターゲットにしており、マークアップで含まれている div 要素にクラス宣言があるため、マークアップを <div id="slides"> に変更して、それを試してみてください。

于 2011-10-06T09:20:56.077 に答える