javascript - 幻灯片/轮播在特定条件下无法正常工作?
问题描述
此 JS 代码无法正常工作。是什么原因 ?
let indexOfSlide = 1; // update me !
show(indexOfSlide);
function liveSlide(n){
show(indexOfSlide = n); // update me !
}
function plusSlidesItem(n){
show(indexOfSlide += n);
}
function show(indexOfSlide) {
let slides_item = document.getElementsByClassName("slides-item");
let tiny_img = document.getElementsByClassName("tiny-img");
let i;
if( indexOfSlide < 1){
indexOfSlide = slides_item.length;
}
if( indexOfSlide > slides_item.length){
indexOfSlide = 1;
}
for(i=0;i<slides_item.length;i++){
slides_item[i].style.display = "none";
}
for(i=0;i< slides_item.length; i++){
tiny_img[i].style.opacity = "0.5";
}
slides_item[indexOfSlide-1].style.display = "initial";
tiny_img[indexOfSlide-1].style.opacity = "1" ;
}
当 indexOfSlide 在 show() 函数的参数中被 n 替换时,并且在 show() 中的两个 if 语句条件中,它可以正常工作。为什么 ?
解决方案
这里可以进行一些代码重构。
let indexOfSlide = 1; // update me !
// we might as well use the global variable indexOfSlide instead of
// passing it as a parameter since it is updating at each call
function show() {
let slides_item = document.getElementsByClassName("slides-item");
let tiny_img = document.getElementsByClassName("tiny-img");
if( indexOfSlide < 1 ){
indexOfSlide = slides_item.length;
} else if( indexOfSlide > slides_item.length ){
indexOfSlide = 1;
}
// you can merge both the loops since they are
// iterating over the same index sequence
for(let i = 0; i < slides_item.length; i++){
slides_item[i].style.display = "none";
tiny_img[i].style.opacity = "0.5";
}
slides_item[indexOfSlide - 1].style.display = "initial";
tiny_img[indexOfSlide - 1].style.opacity = "1" ;
}
// calling the show() function after it has been defined
// is how it should be done else it'll throw an error
show();
function liveSlide(n){
indexOfSlide = n;
show(); // update me !
}
function plusSlidesItem(n){
indexOfSlide += n;
show();
}
看看它是否能解决问题
推荐阅读
- javascript - 我怎样才能投入 .then 的承诺?
- python-3.x - 清理抓取的数据 Python
- ios - 包含可滚动列表的 SwiftUI 可拖动视图
- r - 在 R markdown 中创建带括号的文本(在项目符号列表中)
- javascript - 如何以角度同步我的代码执行
- c++ - 转换结构数据的字节顺序
- django - Elastic Beanstalk 上的 Django,如何将已编辑视频的输出文件保存到 S3 存储桶中
- java - SwaggerGen 枚举生成空数据类型
- centos7 - 如何在 centos 7 上运行 .sln 文件
- java - 如何获取找到该单词的行号?