小编And*_*ore的帖子

我们需要创建一个响应式的图像轮播,并使用Gallery CSS(一个没有javascript的CSS旋转木马 - http://benschwarz.github.io/gallery-css/).

以下是使用的标记示例(不包括图像)

<div class="gallery autoplay items-3">
    <div id="item-1" class="control-operator"></div>
    <div id="item-2" class="control-operator"></div>
    <div id="item-3" class="control-operator"></div>

    <figure class="item">
        <a href="http://www.google.co.uk">
            <h1>First Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.bbc.co.uk/news">
            <h1>Second Item</h1>
        </a>
    </figure>

    <figure class="item">
        <a href="http://www.apple.co.uk">
            <h1>Third Item</h1>
        </a>
    </figure>

    <div class="controls">
        <a href="#item-1" class="control-button">•</a>
        <a href="#item-2" class="control-button">•</a>
        <a href="#item-3" class="control-button">•</a>
    </div>
</div>

如果您单击各个"控制按钮"链接以访问它们,则指向外部网站的链接适用于每个项目.问题是,如果自动播放运行,则单击任何项​​目将转到第一个数字元素,因此将转到www.google.co.uk链接.

由于标记不会随着转换而改变,因此我们无法使用JQuery获取任何已更改的元素.我们已经尝试为"transitionend"(或其浏览器等价物)添加一个事件处理程序,但它永远不会触发.

欢迎任何见解.

更新:

我们试过了

$(document).ready(function () {
        $('.item').on('animationend webkitAnimationEnd MSAnimationEnd', function () {
            alert('fired !!');
        });
    });

和

$(document).ready(function () {
            $('div').on('animationend webkitAnimationEnd …