0

我在幻灯片组件中遇到了 javascript 重叠问题。我想添加一个图标来删除幻灯片中的一张图片，这个图标在每张图片的右上角。

问题是：图标（和他的点击事件）在一个大的空白 div 下（在屏幕截图上为蓝色）。此 div 用于转到下一张图片。

是否有解决方案来触发图标事件并阻止幻灯片事件？

4

1 回答 1

0

Here is the clean code

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

if I put z-index:100 on mySwipe, it's work but only out side of the picture... its a partial solution !

But this is not the desired operation, only the icon must be over...

Any ideas ?

于 2013-04-19T08:10:08.910 回答