Question

我正在尝试使用Dart语言实现轮播，并将多个Div放置在父div中。单击右键时，下一个div的z-index必须高于前一个，以便显示它。我已将所有div类名存储在arraylist中。现在有人可以帮忙搞定这项工作吗？的 HTML

<div class="carousel">
  <div class="galleryCars">
  ....
  </div>
  <div class="galleryCars2">
  ....
  </div>
  <div class="galleryCars3">
  ....
  </div>
  <div class="galleryCars4">
  ....
  </div>
</div>

DART

import 'dart:html';
import 'dart:core';
void main(){
    query(".rightArrow img").onClick.listen((e) => cssRightArrow());
    query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  var carousel = query(".carousel");
  var classList = [];
  carousel.children.forEach(
      (childElement) => childElement.classes.forEach(
          (className) => classList.add(className)
          ));

  /*for (var i = 0; i < classList.length; i++) {                
    var zIndexElem = query(".${classList[i]}");
    var newIndex = int.parse(zIndexElem.style.zIndex ) + 10 ;   
    zIndexElem.style.zIndex = "${newIndex}";
    }*/ //Not Working
}

Answer 1

以下是使用style.display = 'none'代替zIndex的工作示例（我认为zIndex非常适合此用例。）：

import 'dart:html';

void main(){
  query(".rightArrow img").onClick.listen((e) => cssRightArrow());
  query(".leftArrow img").onClick.listen((e) => cssLeftArrow());
}
cssRightArrow(){
  final elements = query(".carousel").children;

  // looking for the one currently displayed
  final Element current = elements.firstWhere((e) => e.style.display != 'none');
  final currentIndex = elements.indexOf(current);

  // hide current and show next one
  if (currentIndex + 1 < elements.length) {
    current.style.display = 'none';
    elements[currentIndex + 1].style.display = '';
  }
}

通过增加Dart语言中的z-index来设置轮播？

1 个答案: