使用JavaScript实现Banner轮播失败，请求故障排查

嘿，我帮你找出了代码里好几个导致轮播失效的问题，咱们一个个说清楚，再给你修复好的完整代码：

1. HTML标签的语法错误 #

• 重复的图片name属性：你页面里的两张轮播图name都设成了adBanner1，但JS里要操作的第二个轮播元素是adBanner2，浏览器根本找不到这个元素，这是第二个轮播完全没反应的核心原因，得把第二张图的name改成adBanner2
• script标签闭合错误：头部最后写了</script>script>，多出来的script文本会破坏页面结构，改成</script>就好
• 页面末尾闭合标签错误：最后一行是<html>，应该是</html>来闭合整个页面
• DOCTYPE声明不规范：原声明里的---Transitional是三个减号，而且PUBLIC后面缺了空格，虽然不直接导致运行失败，但规范的声明能让浏览器以正确的模式渲染页面

2. JavaScript的语法问题 #

• 数组访问的多余空格：adImages1 [thisAd1]和adImages2 [thisAd2]里，数组名和方括号之间的空格会让JS解析出错，必须去掉空格写成adImages1[thisAd1]
• setTimeout的调用方式不规范：用字符串"rotate()"作为参数会触发eval，不仅有性能问题还可能有安全隐患，直接传函数引用setTimeout(rotate, 3000)更稳妥
• 注释语法小问题：开头的隐藏脚本注释写了<!---，正确的HTML注释开头是<!--，虽然大部分浏览器能兼容，但规范写法更稳妥

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Contact Page</title>
<script type="text/javascript">
<!-- Hide Script from Old Browsers
adImages1 = new Array("http://www.rmar.in/images/service/web3.png","http://www.rmar.in/images/service/web3.png","http://www.rmar.in/images/service/web3.png")
adImages2 = new Array("http://www.triadsearchmarketing.com/wp-content/uploads/2015/06/web-design-banner.jpg","http://www.triadsearchmarketing.com/wp-content/uploads/2015/06/web-design-banner.jpg")
thisAd1 = 0
thisAd2 = 0
imgCt1 = adImages1.length
imgCt2 = adImages2.length
function rotate() {
  if (document.images) {
    thisAd1++
    if (thisAd1 == imgCt1) {
      thisAd1 = 0
    }
    document.adBanner1.src = adImages1[thisAd1]
    
    thisAd2++
    if (thisAd2 == imgCt2) {
      thisAd2 = 0
    }
    document.adBanner2.src = adImages2[thisAd2]
    
    setTimeout(rotate, 3000)
  }
}
// End hiding script from old browsers -->
</script>
</head>
<body bgcolor="#FFFFFF" onload="rotate()">
<center>
<img src="http://www.triadsearchmarketing.com/wp-content/uploads/2015/06/web-design-banner.jpg" width="400" height="75" name="adBanner1" vspace="10" alt="Ad Banner 1" />
<br/>
<img src="http://www.rmar.in/images/service/web3.png" width="400" height="75" name="adBanner2" vspace="10" alt="Ad Banner 2" />
</center>
</body>
</html>

修复之后，两个Banner会各自按照自己的图片数组循环切换，每3秒更新一次~

内容的提问来源于stack exchange，提问作者Clarissa