Javascript 与图片#协调的jQuery幻灯片放映按钮？_Javascript_Jquery_Button_Slideshow

Javascript 与图片#协调的jQuery幻灯片放映按钮？

javascript jquery button

Javascript 与图片#协调的jQuery幻灯片放映按钮？,javascript,jquery,button,slideshow,Javascript,Jquery,Button,Slideshow,更新：谢天谢地，我找到了答案。。。因此，关键是使位置：绝对并在我的CSS上的最后一件东西上去掉底部：400px 我正在尝试制作一个幻灯片，当点击圆形按钮时，图像会淡入淡出。有4张图片和4个圆形按钮，所以如果我点击第三个按钮，第三张图片将淡入。然而，我的代码做得不好。我想我使用的index（）不正确？照片没有出现。他们只是在中途淡入，然后淡出，然后所有的图片都消失了。我想这是因为我在“.pic”上的位置：relative。救命啊这是我的HTML： <body> <div cla

更新：谢天谢地，我找到了答案。。。因此，关键是使

位置：绝对

并在我的CSS上的最后一件东西上去掉底部：400px

我正在尝试制作一个幻灯片，当点击圆形按钮时，图像会淡入淡出。有4张图片和4个圆形按钮，所以如果我点击第三个按钮，第三张图片将淡入。然而，我的代码做得不好。我想我使用的

index（）

不正确？照片没有出现。他们只是在中途淡入，然后淡出，然后所有的图片都消失了。我想这是因为我在“.pic”上的

位置：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>

这是我的JS

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

若要最小程度地更改代码，请替换代码

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

为此：

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

或者更好：

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

要回答问题的第二部分，您可能需要参考以下答案：，或

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