更新:谢天谢地,我想通了...所以关键是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);
});