如何将jQuery“关闭”框添加到"jQuery touchTouch“插件的图像滑块中

Question

我正在开发一个web模板，它使用以下jQuery插件来显示图像滑块：

> @name     jQuery touchTouch plugin  * 
> @author       Martin Angelov  *
> @version  1.0  *
> @url          http://tutorialzine.com/2012/04/mobile-touch-gallery/  *
> @license      MIT License

网页模版的现场示范可在以下连结找到:-

47767/index-2.html

现在我面临的一个问题是，当我显示一个图像滑块，只有左右箭头，但我找不到任何关闭框隐藏滑块。例如，如果我在上面的链接中单击一个图像，我将得到以下信息：

​

​

但是，如果有一种方式显示关闭框，这将关闭图像滑块，任何人都可以避免吗？当然，如果我单击滑块之外的任何地方，那么图像滑块就会关闭，但是有一个显式的关闭框将使用户更容易知道如何关闭滑块。

谢谢

Answer 1

分别使用jQuery/CSS :after选择器插入一个关闭按钮。在你的页面上试过了，效果很好。

// CSS

.placeholder:after {
    display: block;
    content:'X';
    position: absolute;
    z-index: 9999999999999;
    font-size: 72px;
    left:  50%; /* adjust as neede */
    top: 50%; /* adjust as needed */
    color: red;
    cursor: pointer;
}

// jQuery

$('.placeholder').after().click(function () {

 $(this).hide();

});

注意：，您可以使用我的示例代码，但是您必须调整css以使关闭按钮按您所希望的方式定位。