我在处理 slider 属性的 JavaScript 函数中遇到问题。我有 3 张带有 .slide
类的幻灯片,每次我“选择”其中一张时,我都会将其设置为 .active-slide
类。问题是,如果 active-slide
的 display
属性是 table
,当我设置这个类时,它会自动更改为 block
,我不明白为什么。
附言我也在使用 Bootstrap 。
我在这里发布与此问题相关的代码部分:
HTML:
<div class="slider">
<div class="slide active-slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
<a href="#" class="slide-link">whatuwant</a>
</div>
<div class="col-md-7" id="first-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7" id="second-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="container up">
<div class="row">
<div class="col-md-5 slide-text">
<h1 class="slide-title">whatuwant</h1>
<p class="slide-par">whatuwant</p>
</div>
<div class="col-md-7 slide-image" id="third-slide-image">
<img src="whatuwant"/>
</div>
</div>
</div>
</div>
</div>
CSS:
.container {
width: 1024px;
}
.up{
display: table-cell;
vertical-align: middle;
max-width: 1024px;
max-height: 470px;
}
.row{
width: 1024px;
margin: 0 auto;
max-width: 1024px;
}
.slider {
position: relative;
width: 100%;
height: 470px;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide{
display: table;
}
JavaScript:
$(document).ready(function() {
$('.buttonfornextslide').click(function() {
var currentSlide = $('.active-slide');
var nextSlide = currentSlide.next();
if(nextSlide.length === 0) {
nextSlide = $('.slide').first();
}
currentSlide.fadeOut(600).removeClass('active-slide');
nextSlide.fadeIn(600).addClass('active-slide');
});
$('.buttonforpreviousslide').click(function() {
var currentSlide = $('.active-slide');
var prevSlide = currentSlide.prev();
if(prevSlide.length === 0) {
prevSlide = $('.slide').last();
}
currentSlide.fadeOut(600).removeClass('active-slide');
prevSlide.fadeIn(600).addClass('active-slide');
});
});
我尽量简化它。
如果问题不清楚:如何将 .active-slide
显示属性保存到 table
?
最佳答案
当使用 fadeIn、slideDown 等时,jQuery 会自动为元素分配“默认”样式。由于 div 的默认样式是“ block ”,这就是应用的样式。不要使用“active-slide”类,而是尝试专门设置 CSS
....
prevSlide.fadeIn(600).css('display','table');
引用:
Fiddle - 你可以看到“显示” block 是类的样式,你必须在 fadeIn 函数之后添加它。
在 fiddle 中,添加
.css('display','block');
运行它,你会看到变化
关于javascript - 在 JavaScript 函数中显示自动设置为阻止,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28000095/