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

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

使用此方法可以

pop()来自数组末尾的项目，unshift()将其放在开头，或
shift()项目从数组的开头，push()到最后。

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

我冒昧地制作一个后退按钮以及下一个按钮，向您展示以这种方式接近它时的容易程度。我还推广了类名，并为演示使用了不同的占位符图像。

public void DrawImage(
    Image image,
    Rectangle destRect,
    int srcX,
    int srcY,
    int srcWidth,
    int srcHeight,
    GraphicsUnit srcUnit
)

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

进一步阅读

Answer 2

您是否在寻找类似的内容：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;
    }
}

使用下一个按钮进行z-Index幻灯片放映

2 个答案:

进一步阅读