使用下一步按钮的 z-Index 幻灯片放映

Question

所以我必须编写一个按钮，使用 z-index 转到幻灯片中的下一张图片。我很难让它正常工作，我觉得好像我做错了什么。它的计数必须为 0, 1, 2, 0, 1, 2

 <!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 5, Part 1</title>
<meta charset = "utf-8"/>
<script type = "text/javascript">
function Next() {
document.getElementById('anime1').style.zIndex = 0;
document.getElementById('anime2').style.zIndex = 1;
document.getElementById('anime3').style.zIndex = 2;
}
</script>
<style type = "text/css">
.anime1 {position: absolute;
top: 150px; left: 250px; z-index: 10;}
.anime2 {position: absolute; 
top: 200px; left: 300px; z-index: 15;}
.anime3 {position: absolute; 
top: 250px; left: 350px; z-index: 20;}
</style>
</head>
<body>
<h1 style= "text-align: center">Lab 5, Part 1</h1>
<p>
<div class="slideshow">
<img class = "anime1" id = "anime1" height = "300"
width = "450" src = "http://images5.fanpop.com/image/photos/29300000/Megurine-Luka-megurine-luka-29391390-1680-1050.jpg" 
alt = "First Image"/>
<img class = "anime2" id = "anime2" height = "300"
width = "450" src = "http://orig06.deviantart.net/a28f/f/2015/079/9/a/hinata_final_lr_by_artgerm-d8me6vb.jpg" 
alt = "Second Image"/>
<img class = "anime3" id = "anime3" height = "300"
width = "450" src = "http://images6.fanpop.com/image/photos/35700000/Hatsune-Miku-snowangel_-35736242-1600-1200.jpg" 
alt = "Third Image"/>
</p>
<input type="button" value="Next" onclick="Next();">

</body>
</html>

我在网上到处查看是否有什么可以帮助我，但我找不到任何东西

Answer 1

您是否正在寻找这样的东西：https://jsfiddle.net/5L7jk73g/

var cnt = 0;

function Next() {
    if (cnt == 0) {
        document.getElementById('anime1').style.zIndex = 0;
        document.getElementById('anime2').style.zIndex = 1;
        document.getElementById('anime3').style.zIndex = 2;
        cnt++;
    } else if (cnt == 1) {
        document.getElementById('anime1').style.zIndex = 1;
        document.getElementById('anime2').style.zIndex = 2;
        document.getElementById('anime3').style.zIndex = 0;
        cnt++;
    } else {
        document.getElementById('anime1').style.zIndex = 2;
        document.getElementById('anime2').style.zIndex = 0;
        document.getElementById('anime3').style.zIndex = 1;
        cnt = cnt - 2;
    }
}

Answer 2

如果您愿意采用更具程序化的方法，您可以使用数组来保存顺序并迭代它以设置 z 索引。

使用这个方法你可以

pop() the item from the end of the array and unshift() 放到开头，或者
shift() the item from the beginning of the array and push() 到此结束。

这使您可以轻松处理任意数量的元素，同时保留您的代码 DRY。

我冒昧地制作了一个后退按钮和一个下一步按钮，以向您展示以这种方式使用它是多么容易。我还概括了 class 名称并在演示中使用了不同的占位符图像。

(function(){ // keep it safe
    var slideshow = document.querySelector('.slideshow'); // store the parent
    var controls = slideshow.querySelector('.controls');  // store the controls
    var els = slideshow.querySelectorAll('.slide');       // store the slides
    var order = Object.keys(els);                         // store the order
    var cn;                                               // make the class holder
    
    // assign a click handler to the parent
    controls.onclick = function(e) {
        // if the class is back or next, store it, otherwise stop here
        if(!(cn = (e.target.className.match(/back|next/)||[false])[0])) return;
        // if back clicked, move the last element to the beginning
        if(cn === "back") order.unshift(order.pop());
        // if next clicked, move the first element to the end
        if(cn === "next") order.push(order.shift());
        // iterate the order, set the z-index of each element sequentially
        for(var i in order) els[order[i]].style.zIndex = i;
    }
})();

.slides { position: relative; margin-top: 5px; }
.slide  { position: absolute; }
.slide2 { top: 25px; left: 25px; }
.slide3 { top: 50px; left: 50px; }

<div class="slideshow">
  <div class="controls">
    <button class="back">Back</button>
    <button class="next">Next</button>
  </div>
  <div class="slides">
    <img class="slide slide1" src="http://placehold.it/150x150/f9fd42/fff">
    <img class="slide slide2" src="http://placehold.it/150x150/42f9fd/fff">
    <img class="slide slide3" src="http://placehold.it/150x150/fd42f9/fff">
  </div>
</div>

使用下一步按钮的 z-Index 幻灯片放映

z-Index slide show using the next button

javascript

z-index

button

进一步阅读