当最后一只猫显示全图时如何提醒？

Question

当最后一只猫显示全图时如何提醒？

当你点击Click HERE猫图像将幻灯片，我想应用我的代码，当显示最后的猫完整图像(在这个演员当点击3次时)

但请不要计入点击量。因为我必须在不同的屏幕尺寸下使用。

https://jsfiddle.net/vncxfx0s/5/

    <div style="cursor: pointer;" id="move-left" onclick="left_fn(-222)">
        Click HERE
    </div>


    <div style=" width: 455px; overflow: hidden; ">
        <ul style=" width: 2000em; transition: transform 200ms ease-in-out; transform: translate3d(0px, 0px, 0px); margin-left: -10px; padding: 0;" id="cat-ul">
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/w3abdeV.jpg">
            </li>
            <li style=" display: inline-table; ">
                <img src="http://i.imgur.com/Wc9bszd.jpg">
            </li>
        </ul>
    </div>


<script>
function left_fn(value) {
    document.getElementById("cat-ul").style.transform = "translate3d("+value+"px, 0px, 0px)";
    var x = (value + 222);
    var y = (value - 222);
    document.getElementById('move-left').setAttribute('onclick','left_fn('+y+')')
}
</script>

Answer 1

一个解决方案是使用jQuery和Viewport-plugin。这个插件广告了几个新的伪选择器。例如，您可以检查任何元素是在视口内部还是外部。下面是一个小片段：

if($("#lastChild").is(":in-viewport"))
{
  alert("hhh");
}

有关更多信息，请查看此处：https://www.appelsiini.net/projects/viewport

我已经使用viewport插件编辑了一个工作小提琴：https://jsfiddle.net/manumanfred/vncxfx0s/8/