带页码的幻灯片放映javascript

我制作了幻灯片。我想添加一些带有页码的说明。 我试图添加函数sliderText（）来得到结果——“图1/7”等等

我不知道这里怎么了。谁能给我一些提示吗

提前谢谢大家,， 梅吉

var-img_指数=0；
var imgs=[
“资产/1.jpg”，
“资产/2.jpg”，
“资产/3.jpg”，
“资产/4.jpg”，
“资产/5.jpg”，
“资产/6.jpg”，
“资产/7.jpg”
];
函数findNextImage（isPrev）{
开关（真）{
案例！！（isPrev&imgs[img\U索引+1]）：
img_指数+=1
返回imgs[img_索引]
case！！imgs[img_index+1]：
img_指数+=1
返回imgs[img_索引]
违约：
img_指数=0
返回imgs[img_索引]
}
sliderText（）
}
功能检查键（事件）{
如果（event.keyCode==“39”）{
document.getElementById（“images”）.src=findNextImage（）；
}else if（event.keyCode==“37”）{
document.getElementById（“images”）.src=findNextImage（true）；
}
}
document.onkeydown=checkKey；
函数sliderText（）{
var text=document.getElementsByClassName（“幻灯片显示文本”）；
var imageNumber=img_指数+1；
text.innerHTML=“image”+imageNumber+”的“+imgs.length；
}

测试
图1/7

改进代码质量的一些修改

我删除了不是纯函数的

findNextImage

，并引入了

findNextImageIndex

：

findNextImageIndex

既不访问也不修改任何外部变量，因此更易于阅读

sliderText

将

imgIndex

作为参数，以便您可以轻松查看设置文本所需的参数

进一步建议

考虑将预设值

image1of7

和

“assets/1.jpg”

从HTML移动到JavaScript。使用从数组中获取的

“assets/1.jpg”

初始化滑块，并调用

sliderText（state.imgIndex）最初一次

请注意，我将幻灯片放映HTML移到了
中，使其成为有效的HTML

修改代码


var状态={
指数：0
};
var imgs=[
“资产/1.jpg”，
“资产/2.jpg”，
“资产/3.jpg”，
“资产/4.jpg”，
“资产/5.jpg”，
“资产/6.jpg”，
“资产/7.jpg”
];
函数findNextImageIndex（imgIndex，isPrev）{
如果（isPrev）{
如果（imgIndex=imgs.length-1）{
返回0；
}否则{
返回imgIndex+1；
}
}
}
函数滑块文本（imgIndex）{
var text=document.getElementsByClassName（“幻灯片放映文本”）[0]；
var imageNumber=imgIndex+1；
text.innerHTML=“image”+imageNumber+”的“+imgs.length；
}
函数goToNextImage（isPrev）{
state.imgIndex=findNextImageIndex（state.imgIndex，isPrev）；
document.getElementById（“images”）.src=imgs[state.imgIndex]；
sliderText（state.imgIndex）；
}
功能检查键（事件）{
开关（event.keyCode）{
案例37:goToNextImage（真）；中断；
案例39:goToNextImage（假）；中断；
}
}
document.onkeydown=checkKey

测试
图1/7