鼠标滚动切换显示文件夹里所有图片
我在网上找了一个鼠标滚动切换显示图片的代码，但是需要在代码中逐个指定图片路径。
这是我下载的代码：
<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也可以哈，谢谢大家。我本人是外行，完全是工作需要！
改成这样即可
<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>
如有帮助，请点击我的回答下方的【采纳该答案】按钮帮忙采纳下，谢谢!
这个只要动态生成图片区域就可以了吧，顺便把图片总数量记录下来循环时判断使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
<script src="js/jquery.min.js"></script>
<style>
#picBox {
width: 800px;
height: 600px;
margin: 70px auto;
}
</style>
<script>
$(document).ready(function () {
var picBox = document.getElementById('picBox');
var picnum = 6;
for (let i = 1; i <= picnum; i++) {
let img;
if (i == 1) {
img = $('<img src="img/1.jpg" width="800px" height="600px" id="pic1" style="display:block;">');
} else {
img = $('<img src="img/' + i + '.jpg" width="800px" height="600px" id="pic' + i + '" style="display:none;">');
}
console.log(img);
img.appendTo(picBox);
}
var nowPic = 1;
function MouseWheel(e) {
var pic;
e = e || window.event;
for (i = 1; i <= picnum; 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 >= picnum) {
nowPic = 1;
} else {
nowPic++;
}
}
/*Firefox注册事件*/
if (document.addEventListener) {
document.addEventListener("DOMMouseScroll", MouseWheel, false);
}
window.onmousewheel = document.onmousewheel = MouseWheel;//IE/Opera/Chrome
});
</script>
</head>
<body>
<div id="picBox">
</div>
</body>
</html>
可以把图片地址循环展示出来啊