Question

我正在使用Superslides脚本为网站创建自适应幻灯片。我创建了一个基本的标题框，我希望将其隐藏，然后在显示带有标题的幻灯片时从底部滑入。

在Superslide脚本中，当前幻灯片获得更高的z-index（2，否则设置为0），并且display：block（否则为'none'）在进入视图时会更改为它。

我对Javascript不太满意所以我在定制我的字幕时遇到了一些麻烦，无法在合适的时间制作动画。我把一个应该评估所有li标签的脚本放在一起（每个li是不同的幻灯片），如果它的z-index为2，它会更改标题div的下边距，以便它滑入视图。我的问题是我的脚本只针对第一个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>

Answer 1

尝试使用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;
}

定位所有li而不仅仅是第一个

1 个答案: