与图片#? 协调的jQuery 幻灯片按钮？答案

【问题标题】：jQuery slideshow button that coordinates with picture #?与图片#? 协调的jQuery 幻灯片按钮？
【发布时间】：2012-08-16 03:53:41
【问题描述】：

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

我正在尝试制作在单击圆形按钮时淡入淡出的图像幻灯片。有 4 张图片，将是 4 个圆形按钮，所以如果我单击第 3 个按钮，第 3 张图片将淡入。但是，我的代码没有正确执行。我认为我使用 index() 不正确？图片没有出现。它们只是在中途淡入，然后淡出，然后所有图片完全消失。我认为这是因为我在“.pic”上的position:relative。请帮忙！

这是我的 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);
});

【问题讨论】：

标签： javascript jquery button slideshow

【解决方案1】：

为了最小限度地改变你的代码替换你的代码

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

用这个：

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

或者，更好：

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

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

【讨论】：