fsk33 2022-06-28 21:26 采纳率: 73.9%
浏览 77
已结题

鼠标滚动切换显示文件夹里所有图片

我在网上找了一个鼠标滚动切换显示图片的代码,但是需要在代码中逐个指定图片路径。
这是我下载的代码:

<style>
#picBox{
    width:800px;height:600px;
    margin:70px auto;
    }
</style>
<script>
    var nowPic=1;
    function MouseWheel(e){
        var pic;
        e=e||window.event;
        for(i=1;i<20;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>=19){
                nowPic=1;
            }else{
                nowPic++;
            }
        }
    /*Firefox注册事件*/
    if(document.addEventListener){
            document.addEventListener("DOMMouseScroll",MouseWheel,false);
        }
    window.onmousewheel=document.onmousewheel=MouseWheel;//IE/Opera/Chrome
</script>
<body>
    <div id="picBox">
        <img src="img/1.jpg" width="800px" height="600px" id="pic1" style="display:none;">
        <img src="img/2.jpg" width="800px" height="600px" id="pic2" style="display:none;">
        <img src="img/3.jpg" width="800px" height="600px" id="pic3" style="display:none;">   
    </div>
</body>

如上述,每个图片都要专门指定路径,很不方便。
我想要达到的结果:
我的图片文件夹数量不确定,有时两个幅图,多的时候有近百幅,均以序号1、2、3.jpg格式编码,希望各位帮助解决:在代码中不需要逐个输入每一幅图片地址的情况下,鼠标滚动切换显示文件夹里的所有图片。用PHP也可以哈,谢谢大家。我本人是外行,完全是工作需要!

  • 写回答

3条回答 默认 最新

  • 天际的海浪 2022-06-28 21:53
    关注

    改成这样即可

    <style>
    #picBox{
        width:800px;height:600px;
        margin:70px auto;
        }
    </style>
    <script>
        var imgnum = 5; //图片总数
    
        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>
    <body>
        <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>
    </body>
    

    如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!

    img

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 7月7日
  • 已采纳回答 6月29日
  • 创建了问题 6月28日

悬赏问题

  • ¥15 基于卷积神经网络的声纹识别
  • ¥15 Python中的request,如何使用ssr节点,通过代理requests网页。本人在泰国,需要用大陆ip才能玩网页游戏,合法合规。
  • ¥100 为什么这个恒流源电路不能恒流?
  • ¥15 有偿求跨组件数据流路径图
  • ¥15 写一个方法checkPerson,入参实体类Person,出参布尔值
  • ¥15 我想咨询一下路面纹理三维点云数据处理的一些问题,上传的坐标文件里是怎么对无序点进行编号的,以及xy坐标在处理的时候是进行整体模型分片处理的吗
  • ¥15 CSAPPattacklab
  • ¥15 一直显示正在等待HID—ISP
  • ¥15 Python turtle 画图
  • ¥15 stm32开发clion时遇到的编译问题