使用next按钮显示z-Index幻灯片

z-Index slide show using the next button

本文关键字：z-Index 幻灯片 显示 按钮 next 使用      更新时间：2023-09-26

所以我必须编写一个按钮，使用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>

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

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

使用这个方法你可以

  • pop()表示数组末尾的项，unshift()表示数组开头的项，或者
  • shift()表示数组开始的项，push()表示数组结束的项。

它允许你轻松地处理任意数量的元素，同时保持你的代码DRY。

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

(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>

进一步阅读

  • Array.prototype.pop() <一口><子> (MDN)
  • Array.prototype.unshift() <一口><子> (MDN)
  • Array.prototype.shift() <一口><子> (MDN)
  • Array.prototype.push() <一口><子> (MDN)
  • Don't Repeat Yourself (Wikipedia)

您是否正在寻找这样的东西: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;
    }
}
相关文章：