通过增加 Dart 语言中的 z-index 来旋转木马？

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>

飞镖

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 = '';
  }
}