javascript - JQuery 两个图像 slider css 问题

Question

我使用了一个插件让两张图片在顶部有一个 slider 来显示新的和旧的...请参阅链接:- http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/index.html

然而，我正在努力将播放按钮完全放在移动的白色条的中央，这是我正在使用的代码:-

.js-slider-last-container:after {
    background-color: #fff;
    content: url(../play.png);
    height: 100%;
    position: absolute;
    width: 5px;
    z-index: 1;
}

有人有什么想法吗？

谢谢!斯科特

Answer 1

目前您的 css 可能无法解决您的问题。但我有个主意。您需要在“.js-slider-container”div 元素上创建图像元素，就像按钮之前/之后一样。现在您需要动态移动该图像，因为“.js-slider-last-container”宽度值发生变化。

我会展示算法

HTML

<div class="wrap">
        <div class="js-slider-container">
            <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/play.png" id="arrow" />
            <div class="before">Before</div>
            <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/before.jpg" class="js-slider-first">
            <div class="js-slider-last-container">
                <img src="http://www.project-progress.co.uk/test/Compare-Two-Images-With-Smooth-Slider/after.jpg" class="js-slider-last">
            </div>
            <div class="after">After</div>
        </div>
    </div>

在html中我只添加了图片

JS

container.mousemove( function(e) {
                let widthVal=container.width() - (e.pageX - container.offset().left)
                $( lastImgContainer ).css({
                    "width" :widthVal  // container's width - mouse's position from left in the container
                });
                $('#arrow').css({"right":widthVal});
            });

在 JS 中我改变了一些小东西。目前我已经调整了箭头图像，但您可能需要使用::after css 代码从 css 内容中删除该箭头图像 + 您可能还需要在该箭头图像上制作动画。