PHP鼠标滚轮滚动翻看图像只能看到奇数或偶数编号的一半图像

Question

做了一个网页里读取服务器文件夹里的jpg图像组（图像组以0.jpg开始编号，最后一个图像编号不确定，一般在100以内）的页面，需要用鼠标滚轮滚动翻看图片。多方查阅网上资料后，写了以下代码，运行出来，用鼠标是滚动翻图的，但是总会漏看一半图像，即只能看到编号为奇数或偶数的图像，鼠标每滚动一下，会跳过一幅图，是怎么回事呢？代码是否存在问题？谢谢解决！
（注：我用的是谷歌浏览器）

<?php
$imgnum = 0;
$path = './img'; //当前目录
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {  //遍历该php文件所在目录
    list($filesname,$kzm)=explode(".",$file); //获取扩展名
    if($kzm=="gif" or $kzm=="jpg" or $kzm=="JPG") { //文件过滤
        if (!is_dir('./'.$file)) {  //文件夹过滤
            $imgnum = $imgnum + 1;}}}
?>

<script>
var imgnum = <?php echo $imgnum;?>; //图片总数
var nowPic=1;
function MouseWheel(e){
var pic;
e=e||window.event;
for(i=1;i<=imgnum;i++){
if(i==nowPic){
if(e.wheelDelta){//IE
pic=document.getElementById("pic"+i);
pic.style.display="block";
}else if(e.detail){//Firefox
pic=document.getElementById("pic"+i);
pic.style.display="block";
}}else{pic=document.getElementById("pic"+i);
pic.style.display="none"; }}    
if(nowPic>=imgnum){
nowPic=1;
}else{
nowPic++;}}
/*Firefox注册事件*/
if(document.addEventListener){
document.addEventListener("DOMMouseScroll",MouseWheel,false);}
window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script>

<div id="picBox">
<script type="text/javascript">
for (var i = 1; i <= imgnum; i++) {
document.write('<img src="img/'+i+'.jpg" width="800px" height="600px" id="pic'+i+'" style="display:'+(i==1?'block':'none')+';">');}
</script>
</div>

Answer 1

鼠标每滚动一下，其实没有跳过一幅图，是滚动得太快了。下面的MouseWheel函数添加了延时。原来的MouseWheel函数没有判断鼠标滚轮的滚动方向，统一向下翻图片，下面的MouseWheel函数添加了鼠标滚轮滚动方向的判断，图片可向上、向下两个方向翻动。

另外，直接在div里写script代码感觉代码结构有点混乱，下面写了一个函数renderPicBox，调用renderPicBox函数可在id为picBox的div里添加图片。

<div id="picBox"></div>

<script>
    var imgnum = < ? php echo $imgnum; ? > ; //图片总数
    var nowPic = 1;
    // 是否展示下一张图片
    let nextPicFlag = true;

    function MouseWheel(e) {
        if (nextPicFlag) {
            nextPicFlag = false;

            var pic;
            e = e || window.event;
            for (i = 1; i <= imgnum; i++) {
                if (i == nowPic) {
                    pic = document.getElementById("pic" + i);
                    pic.style.display = "block";
                } else {
                    pic = document.getElementById("pic" + i);
                    pic.style.display = "none";
                }
            }

            if (e.wheelDelta) { //IE
                if (e.wheelDelta < 0) {
                    if (nowPic >= imgnum) {
                        nowPic = 1;
                    } else {
                        nowPic++;
                    }
                } else {
                    if (nowPic <= 1) {
                        nowPic = imgnum;
                    } else {
                        nowPic--;
                    }
                }
            } else if (e.detail) { //Firefox
                if (e.detail > 0) {
                    if (nowPic >= imgnum) {
                        nowPic = 1;
                    } else {
                        nowPic++;
                    }
                } else {
                    if (nowPic <= 1) {
                        nowPic = imgnum;
                    } else {
                        nowPic--;
                    }
                }
            } else { // 其他情况
                if (nowPic >= imgnum) {
                    nowPic = 1;
                } else {
                    nowPic++;
                }
            }

            // 设置延时，不让图片滚动太快，setTimeout的第2个参数为延时时间，单位为毫秒
            setTimeout(function() {
                nextPicFlag = true;
            }, 500);
        }
    }

    /*Firefox注册事件*/
    if (document.addEventListener) {
        document.addEventListener("DOMMouseScroll", MouseWheel, false);
    }
    window.onmousewheel = document.onmousewheel = MouseWheel; //IE/Opera/Chrome

    /**
     * 渲染图片
     * @param {Object} imgnum 图片数量
     */
    function renderPicBox(imgnum) {
        let htmlStr = "";
        for (var i = 1; i <= imgnum; i++) {
            htmlStr += '<img src="img/' + i + '.jpg" width="800px" height="600px" id="pic' + i + '" style="display:' + (i == 1 ? 'block' : 'none') + ';">';
        }

        let picBoxEle = document.getElementById("picBox");
        picBoxEle.innerHTML = htmlStr;
    }
    renderPicBox(imgnum);
</script>