我正在使用Superslides脚本为网站创建响应式幻灯片.我创建了一个基本的字幕框,要隐藏它,然后在显示带有字幕的幻灯片时从底部滑入.
在Superslide脚本中,当前幻灯片的Z索引较高(为2,否则设置为0),并且在显示时会对其进行更改:display:块(否则为“ none”).
我对Javascript不太满意,因此在将字幕定位到适当的时间进行动画制作时遇到了一些麻烦.我整理了一个脚本,该脚本应该评估所有li标签(每个li是一张不同的幻灯片),并且如果z索引为2,它将更改标题div的下边距,使其滑入视图.我的问题是我的脚本仅以第一个li为目标,而不是全部运行.对于第一个li来说,它很好用,我只需要它与其余li一起运行即可.任何建议表示赞赏!
脚本:
var li = document.querySelector('li[style]'),
inlinezIndex = li.style.zIndex;
console.log(inlinezIndex);
if(inlinezIndex == 2){
document.getElementById('caption').style.bottom = '300px';
$('#caption').css({'transition': '10s'});
}
else{
document.getElementById('caption').style.bottom = '0px';
}
HTML:
<div id="slides">
<ul class="slides-container">
<li class="slide1">
<img src="images/people.jpeg" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/surly.jpeg" width="1024" height="682" alt="Surly">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work1</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work2</p>
</div>
</li>
<li class="slide1">
<img src="images/affinity.jpeg" width="1024" height="685" alt="Affinity">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work3</p>
</div>
</li>
<li class="slide1">
<img src="images/cinelli-front.jpeg" width="1024" height="683" alt="Cinelli">
<div id="caption">
<h1>Hello</h1>
<h2>This is a test</h2>
<p>To see if I can get this to work4</p>
</div>
</li>
</ul>
<nav class="slides-navigation">
<a href="#" class="next"><i class="icon-chevron-right"></i></a>
<a href="#" class="prev"><i class="icon-chevron-left"></i></a>
</nav>
</div>
解决方法:
尝试使用querySelectorAll而不是querySelector.
然后,您可以遍历li并应用您的样式等.
另外,我看到您正在使用具有相同ID(“标题”)的多个元素,这是不好的做法.实际上,我认为根据HTML5规范,这是无效的HTML,因为id应该是唯一的(请看此stackoverflow thread).
例
var list = document.querySelectorAll('.slides-container li');
for (var i = 0; i < list.length; i++) {
var li = list[i];
var zIdx = li.style.zIndex;
// Use a class instead of id for captions
var caption = li.querySelector('.caption');
if (zIdx == 2) {
caption.style.bottom = '300px';
} else {
caption.style.bottom = '0px';
}
}
我还将CSS转换放入CSS(handy-dandy transitions)中:
.caption {
transition: bottom 10s;
}