0

初心者で申し訳ありませんが、プログラミングに関しては非常に難しいので、誰かが助けてくれると助かります!

基本的に、ボタンをクリックすると画像が切り替わるいくつかの画像でzindexを作成しようとしています。これはおそらく非常に基本的なことですが、何をすべきかについて非常に迷っています。概念は理解できますが、入力できません。

また、画像をページの中央に配置しようとしています。私は次のように推薦されました。しかし、それはうまくいきませんでした。誰か助けてくれませんか？

ここに私が持っているものがあります:

CSS

#xbone {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-1
}
#ps4 {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-2
}
#wiiu {
    position:absolute;
    left:0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    z-index:-3
}

JavaScript

function changeStackOrder() {
    document.getElementById("xbone").style.zIndex="1";
}

HTML 

<img id="xbone" alt="Xbox One" width="800" height="600"
     src="http://assets1.ignimgs.com/vid/thumbnails/user/2013/06/19/XboxOne1.jpg">
<img id="ps4" alt="Playstation 4" width="800" height="600"
     src="http://www.nowgamer.com/siteimage/scale/0/0/360062.jpg" >
<img id="wiiu" alt="Wii U" width="800" height="600"
     src="http://venturebeat.files.wordpress.com/2013/07/wii-u.jpg" >
<input type="button" onclick="changeStackOrder()" value="Change stack order">

JsFiddle: http://jsfiddle.net/GkGJw/

4

2 に答える 2

0 
function changeStackOrder() {
    $("img").each(function() {
        $(this).css("zIndex", "+=1");
        if($(this).css("zIndex") == "0"){
            $(this).css("zIndex", "-3");
        }
    });
}

このようなことを試してください

于 2013-10-16T04:27:15.433 に答える