Question

更新：我明白了谢天谢地......所以关键是要制作position: absolute并取出底部：400px我CSS上的最后一件事。

我正在尝试幻灯片显示单击圆形按钮时淡入和淡出的图像。有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);
});

Answer 1

最低限度地更改代码替换代码

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

用这个：

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

或者，更好：

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

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

与图片＃配合的jQuery幻灯片按钮？

1 个答案: