Question

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

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

是否有触发图标事件的解决方案＆amp;阻止幻灯片活动？

Answer 1

这是干净的代码

<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上，它可以工作，但只能在图片的一侧... 它是一个部分解决方案！

但这不是理想的操作，只有图标必须结束......

有什么想法吗？

通过重叠项管理点击事件

1 个答案: