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();

要回答您问题的第二部分，您可能需要参考以下答案：How to overlay images或 this Image over Image CSS

于 2012-08-15T19:32:51.450 回答