0

更新：私はそれを理解しました...それで、キーはposition: absolute、CSSの最後のもので、下部を作成して取り出すことでした.400px。

円形のボタンをクリックするとフェードインおよびフェードアウトする画像のスライド ショーを作成しようとしています。4 つの画像があり、4 つの円形のボタンになるため、3 番目のボタンをクリックすると 3 番目の画像がフェードインします。しかし、私のコードは正しく機能していません。私の使い方が悪いのindex()でしょうか？写真が表示されません。それらは途中でフェードインしてからフェードアウトし、すべての写真が完全に消えます。position:relative「.pic」のせいだと思います。助けてください！

ここに私のHTMLがあります：

<body>
<div class="wrapper">
    <div class="image_frame">
        <div src="" class="first"></div>
            <img src="images/galaxy.jpg" class="gala pic">

            <img src="images/aurora.jpg" class="auro pic">


    </div>

    <div class="buttonholder">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>
</body>
</html>

これが私のCSSです：

html, body {
    background: black;
    margin: 0;
    padding: 0;
}

.wrapper {
    width: 800px;
    margin: 0 auto;
    padding: 0;
}

.image_frame {
    width: 700px;
    height: 400px;
    position: relative;
    overflow: hidden;
}

img {
    width: 700px;
    height: 400px;
    padding-top: 10px;
    float: left;
}


.gala {
    display: block;
    position: relative;
}

.buttonholder {
    display: block;
    width: 400px;
    margin: 0 auto;
    text-align: center;
}

ul li {
    list-style: none;
    height: 3px;
    width: 3px;
    float: left;
    background: #efefef;
    padding: 10px;
    margin: 0 5px;
    border-radius: 100px 100px 100px 100px;
    cursor: pointer;
    text-indent: -9999px;
}

.button_normal {
    background: #efefef;
}

.selected {
    background: grey;
}


.pic {
    position: relative;
    bottom: 400px;
}

そして、これが私のJSです

$('ul li').click(function(){
    $('img').fadeOut(300);
    var listPos = $('ul').index(this);
    $('img').eq(listPos).fadeIn(300);
});
4

1 に答える 1

0

コードを最小限に変更するには、コードを置き換えます

var listPos = $('ul').index(this);

これとともに：

var listPos = $('ul li').index(this);

または、より良い：

var listPos = $(this).index();

質問の2番目の部分に答えるには、この答えを参照することをお勧めします：画像をオーバーレイする方法、またはこの画像を画像CSSに重ねる方法

于 2012-08-15T19:32:51.450 に答える