我有一個基本的幻燈片在jQuery中的工作正常,除了當內容淡入淡入從頂部或從底部。我真的不知道爲什麼會發生這種情況。我基本上希望文本留在屏幕的中心(水平和垂直方向),並在原地淡出&。Simpel文本幻燈片表現奇怪
HTML:
<div id="open-menu">
<div class="index">
<div class="sp">
<h1>HEADING 1</h1>
<p>Text</p>
</div>
<div class="sp">
<h1>HEADING 2</h1>
<p>Text</p>
</div>
<div class="sp">
<h1>HEADING 3</h1>
<p>Text</p>
</div>
<div class="sp">
<h1>HEADING 4</h1>
<p>Text</p>
</div>
<div class="sp">
<h1>HEADING 5</h1>
<p>Text</p>
</div>
<div class="sp">
<h1>HEADING 6</h1>
<p>Text</p>
</div>
</div>
<div id="button-previous">prev</div>
<div id="button-next">next</div>
</div>
CSS:
#open-menu {
position:fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
z-index: 50;
background: #fff;
text-align: center;
}
#open-menu .index {
position: fixed;
transform: translate(-50%, -50%);
top: 54%;
left: 50%;
}
#open-menu .index h1 {
font-size: 2rem;
line-height: 3.2rem;
-webkit-font-smoothing: subpixel-antialiased;
}
#open-menu .index p {
margin: 2rem 0 0 0;
font-size: 1.25rem;
line-height: 2.2rem;
}
#center-2 {
display: table;
margin: 0 auto;
font-size: 1.25rem;
}
.sp {margin-bottom: 60px;}
#button-previous {float: left;}
#button-next {float: right;}
的jQuery:
$(document).ready(function(){
$('.sp').first().addClass('active');
$('.sp').hide();
$('.active').show();
$('#button-next').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':last-child')) {
$('.sp').first().addClass('active');
}
else {
$('.oldActive').next().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
$('#button-previous').click(function(){
$('.active').removeClass('active').addClass('oldActive');
if ($('.oldActive').is(':first-child')) {
$('.sp').last().addClass('active');
}
else {
$('.oldActive').prev().addClass('active');
}
$('.oldActive').removeClass('oldActive');
$('.sp').fadeOut();
$('.active').fadeIn();
});
});
的jsfiddle: https://jsfiddle.net/dgy740g3/
雅他的CSS也產生了一些問題......最初我雖然也使用CSS來解決這個問題。 bt我是jst用js做的。 –