dart - 通过增加Dart语言中的z-index的轮播？

Question

我正在尝试使用Dart语言并在父div中放置多个Div来实现轮播。单击鼠标右键时，下一个div的z索引必须高于上一个div的z索引才能显示。我已经将所有divs类名存储在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 = '';
  }
}