javascript - 通过鼠标滚动在单个部分中一张一张地显示多个图像

Question

我想在手动鼠标滚动的单个部分中一张一张地显示图像。

我通过鼠标点击和时间延迟来尝试。

<div>
    <script>
        $(document).ready(function () {
            $('#snowballAppear').click(function () {
                $('#dialo').hide().delay(3000).fadeIn(1000);
            });
        });
    </script>

    <img id="dialo" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="d4.png">
</div>

Answer 1

这是不是缺少 ID #snoballapear 元素，所以我添加了按钮，也许您可​​以稍后更改

    var src = ['https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg','http://omg.mn/wp-content/uploads/2017/01/bugatai-zurag-1.png'];
   var i = 0;
   $(document).ready(function() {
      $(window).bind('mousewheel',function() {
        $('#dialo').hide().delay(1000).fadeIn();
        if (i==1){
        $('#dialo').attr('src', src[i]);
        i=0;
        }
        else {
        $('#dialo').attr('src', src[i]);
        i=1;
        }
         
      });
    });

div{height:500px}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div>
    	<img id="dialo" style="display: none;margin-left: 100px;margin-top: -150px; position: relative" src="https://i.ytimg.com/vi/vl8IxeB0ss4/maxresdefault.jpg">
    </div>