0

スライドショー コンポーネントで JavaScript のオーバーラップの問題が発生しました。スライドショーの画像を削除するアイコンを追加したいのですが、このアイコンは各画像の右上隅にあります。

問題は次のとおりです。アイコン（および彼のクリックイベント）は、大きな空白のdiv（スクリーンショットの青色）の下にあります。この div は、次の画像に移動するために使用されます。

アイコンイベントを発生させてスライドショーイベントをブロックする解決策はありますか?

4

1 に答える 1

0

ここにきれいなコードがあります

<html>
<head>
    <style>
        #slideshowController1
        {
            position: absolute;
            left: 50%;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 98;
            border: 1px solid blue;
        }

        #slideshowController2
        {
            position: absolute;
            left: 0;
            top: 0;
            width: 50%;
            height: 100%;
            z-index: 98;
            border: 1px solid green;
        }

        #pic1
        {
            height: 400px;
            width: 400px;
            border: 1px solid red;
        }

        #delete1
        {
            float: right;
            width: 24px;
            height: 24px;
            margin-top: 0px;
            background-color: black;
        }

        .swipe
        {
            overflow: hidden;
            visibility: hidden;
            position: relative;
            width: 100%;
            max-width: 500px;
            margin: 0 auto;
            text-align: center;
        }

        .swipe-wrap
        {
            overflow: hidden;
            position: relative;
        }

        #slideShow
        {
            position: relative;
            overflow: hidden;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="slideShow">

        <div id="slideshowController1" class="slideshowController" onclick="alert('right');">
        </div>
        <div id="slideshowController2" class="slideshowController" onclick="alert('left');">
        </div>
        <div id="mySwipe" class="swipe" style="visibility: visible;">
            <div class="swipe-wrap" id="swipe-gallery" style="width: 2500px;">
                <div id="pic1">
                    <div id="delete1" class="thumbDelete" style="z-index: 100;" onclick="alert('delete');">
                        <img src="../../img/delete.png" width="100%">
                    </div>
                </div>
            </div>
        </div>

    </div>

    </div>
</body>
</html>

z-index:100 を mySwipe に配置すると、うまくいきますが、写真の外側だけです...部分的な解決策です!

しかし、これは目的の操作ではありません。アイコンだけを終了する必要があります...

何か案は ？

于 2013-04-19T08:10:08.910 に答える