开发者问题收集

幻灯片 HTML/CSS/JS 中的“错误 x[index] 未定义”

2021-04-16
132
javascript html css

我是前端开发新手，我需要一些帮助来解决这个错误

你能帮我解决我遇到的问题吗

var index = 1; show(index);

function move(n) { show(index = index + n); }

function show(n) { var i; var x = document.getElementsByClassName("slides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } x[index].style.display = "block"; } 

.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}

<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.sstatic.net/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
1个回答

因此，您的 JS 代码存在问题，您没有考虑根据幻灯片的长度（即您对右侧和左侧按钮的点击）更改索引。

我的意思是说，您应该考虑一下当您继续单击右侧按钮时会发生什么，因此每次索引都会增加，因此您需要将其设置回第一张图片或幻灯片，在这种情况下使用以下条件 if (n > x.length) {index = 1}
反之亦然 if (n < 1) {index = x.length ，适用于减少图片或幻灯片（左按钮）的情况。

这是解决此问题所需的 JS 代码： 

var index = 1;
show(index);

function move(n) {
  show(index = index + n);
}

function show(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {index = 1}    
  if (n < 1) {index = x.length} 
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[index-1].style.display = "block";  
}

Fiddle（视图）： 

var index = 1;
show(index);

function move(n) {
  show(index = index + n);
}

function show(n) {
  var i;
  var x = document.getElementsByClassName("slides");
  if (n > x.length) {index = 1}    
  if (n < 1) {index = x.length} 
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[index-1].style.display = "block";  
}
.w3-content{max-width:980px;margin:auto}
.w3-center{text-align:center!important}
.w3-btn-floating:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.w3-button{color:#000;background-color:#f1f1f1;padding:8px 16px}.w3-button:hover{color:#000!important;background-color:#ccc!important}
.w3-btn,.w3-btn-floating{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
.w3-btn-floating{display:inline-block;text-align:center;color:#fff;background-color:#000;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating{width:40px;height:40px;line-height:40px}
.w3-btn-floating:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
.w3-btn-floating{-webkit-transition:background-color .25s,color .15s,box-shadow .25s,opacity 0.25s,filter 0.25s,border 0.15s;transition:background-color .25s,color .15s,box-shadow .15s,opacity .25s,filter .25s,border .15s}
<!DOCTYPE html>
<html>
<body>
<div class="w3-content" style="max-width:400px;position:relative">
<img class="slides" src="https://i.sstatic.net/Qypol.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/yU7fs.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/xxLmR.jpg" style="width:100%">
<img class="slides" src="https://i.sstatic.net/YiIiQ.jpg" style="width:100%">
<a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="move(-1)">❮</a>
<a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="move(1)">❯</a>
</div>
</body>
</html>
Mohamed Bdr
2021-04-16