为什么有错误

慕粉2015574105 2018-03-26

源自：项目：JS实现轮播特效 3-3 轮播图之定时器设置

收起

8回答

好帮手慕星星回答被采纳获得+3积分 2018-03-27 09:10:40

你重新粘贴上来的代码没有补全哦，没有调用，把我给你修改的代码粘贴一下，你自己再测试一下：

//封装一个代替getElementById（）的方法

function byId(id) { return typeof(id) === "string" ? document.getElementById(id) : id; }

//全局变量

var index = 0,

timer = null,

pics = byId("banner").getElementsByTagName("div"),

len = pics.length;

function slideImg() {

var main = byId("main");

//划过清除定时器离开继续

main.onmouseover = function() {

//划过清除定时器

}

main.onmouseout = function() {

timer = setInterval(function() {

index++;

//len=3 0 1 2

if (index >= len) { index = 0; }

//切换图片

changeImg();

}, 1000);

}

main.onmouseout();

}

function changeImg() {

//遍历Banner下的div，将其隐藏

for (var i = 0; i < len; i++) {

pics[i].style.display = "none";

}

//根据index索引找到当前div，将其显示出来

pics[index].style.display = "block";

}

slideImg();

收起回答

慕粉2015574105 提问者 #1

按照您的代码执行，还是那个错误 Uncaught TypeError: Cannot read property 'getElementsByTagName' of null at script.js:11 我用的谷歌啊，能是浏览器的问题么

2018-03-27 10:58:12
卡布琦诺回复提问者慕粉2015574105 #2

你把楼上老师给你的代码复制粘贴替换你本地的代码，然后清除浏览器的历史记录试试！

2018-03-27 12:00:06
慕粉2015574105 提问者回复卡布琦诺 #3

试过了还是之前的错误， pics = byId("banner").getElementsByTagName("div"),这句话有问题么

2018-03-27 14:19:47

点开查看后面2条评论

提问者慕粉2015574105 2018-03-26 19:13:27

//封装一个代替getElementById（）的方法

function byId(id){

return typeof(id)==="string"?document.getElementById(id):id;

}

//全局变量

var index=0,

timer=null,

pics=byId("banner").getElementsByTagName("div"),

len=pics.length;

function slideImg(){

var main=byId("main");

//划过清除定时器离开继续

main.onmouseover=function(){

//划过清除定时器

}

main.onmouseout=function(){

timer=setInterval(function(){

index++;//len=3 0 1 2

if(index>=len){

index=0;

}

//切换图片

changeImg();

},3000);

}

function changeImg(){

//遍历Banner下的div，将其隐藏

for(var i=0;i<len;i++){

pics[i].style.display="none";

}

//根据index索引找到当前div，将其显示出来

pics[index].style.display="block";

}

收起回答

提问者慕粉2015574105 2018-03-26 18:51:00

收起回答

好帮手慕星星 #1

重新测试了一遍，是没有这个报错的哦，可以把你修改之后的代码粘贴一下吗？

2018-03-26 19:11:09
提问者慕粉2015574105 回复好帮手慕星星 #2

//封装一个代替getElementById（）的方法 function byId(id){ return typeof(id)==="string"?document.getElementById(id):id; } //全局变量 var index=0, timer=null, pics=byId("banner").getElementsByTagName("div"), len=pics.length; function slideImg(){ var main=byId("main"); //划过清除定时器离开继续 main.onmouseover=function(){ //划过清除定时器 } main.onmouseout=function(){ timer=setInterval(function(){ index++;//len=3 0 1 2 if(index>=len){ index=0; } //切换图片 changeImg(); },3000); } } function changeImg(){ //遍历Banner下的div，将其隐藏 for(var i=0;i<len;i++){ pics[i].style.display="none"; } //根据index索引找到当前div，将其显示出来 pics[index].style.display="block"; }

2018-03-26 19:12:59
提问者慕粉2015574105 回复好帮手慕星星 #3

我粘到回答里了

2018-03-26 19:14:14

好帮手慕星星 2018-03-26 17:49:42

测试了你粘贴的代码，并没有出现你说的那种错误，但是代码中有不对的地方：

1、你的 main.onmouseout函数写完之后应该调用一下，slideImg函数也应该调用。

2、给banner下的div隐藏的时候none是要加引号的哦，如果不加引号就是一个变量，就会报错。

建议你使用主流浏览器再测试一下，例如：Chrome等。

收起回答

提问者慕粉2015574105 #1

我是用的谷歌啊，改过了none之后控制台还是报错错误在回答里

2018-03-26 18:50:49

提问者慕粉2015574105 2018-03-26 17:35:30

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

</head>

<body>

</a>

</a>

</a>

</div>

</div>

</body>

</html>

收起回答

提问者慕粉2015574105 2018-03-26 17:35:05

*{margin:0;

padding:0;}

ul{

list-style: none;

}

body{

font-family: "微软雅黑";

color:#14191e;

}

.main{

width: 1200px;

height:460px;

margin:30px auto;

overflow:hidden;

position: relative;

}

.banner{

width: 1200px;

height:460px;

overflow:hidden;

position: relative;

}

.banner-slide{

width: 1200px;

height:460px;

position:absolute;

background-repeat: no-repeat;

display: none;

}

.slide-active{

display: block;

}

.slide1{

}

.slide2{

}

.slide3{

}

.button{

position:absolute;

width:40px;

height:80px;

left:244px;

top:50%;

margin-top: -40px;

background: url(../img/arrow.png) no-repeat center center;

}

.button:hover{

background-color:#333;

opacity: 0.8;

filter: alpha(opacity=80);

}

.prev{

transform:rotate(180deg);

}

.next{

left:auto;

right:0;

}

.dots{

position: absolute;

right:20px;

bottom: 24px;

text-align: right;

}

.dots span{

display:inline-block;

width:12px;

height: 12px;

border-radius: 50%;

margin-left: 8px;

line-height:12px;

background:rgba(7,17,27,0.4);

box-shadow:0 0 0 2px rgba(255,255,255,0.8) inset;

cursor: pointer;

}

.dots span.active{

box-shadow: 0 0 0 2px rgba(7,17,27,0.4) inset;

background:#fff;

}

收起回答

提问者慕粉2015574105 2018-03-26 17:34:40

//封装一个代替getElementById（）的方法

function byId(id){

return typeof(id)==="string"?document.getElementById(id):id;

}

//全局变量

var index=0,

timer=null,

pics=byId("banner").getElementsByTagName("div"),

len=pics.length;

function slideImg(){

var main=byId("main");

//划过清除定时器离开继续

main.onmouseover=function(){

//划过清除定时器

}

main.onmouseout=function(){

timer=setInterval(function(){

index++;//len=3 0 1 2

if(index>=len){

index=0;

}

//切换图片

changeImg();

},3000);

}

function changeImg(){

//遍历Banner下的div，将其隐藏

for(var i=0;i<len;i++){

pics[i].style.display=none;

}

//根据index索引找到当前div，将其显示出来

pics[index].style.display="block";

}

收起回答

好帮手慕星星 2018-03-26 16:22:57

因为#banner下面直属的子元素是a标签，不是div标签哦。

收起回答

提问者慕粉2015574105 #1

老师视频里也是直接这么用的啊，为什么我的不行

2018-03-26 16:30:02
好帮手慕星星回复提问者慕粉2015574105 #2

可以把你现在的代码全部粘贴上来吗？可以更方便的给你解决问题哦。

2018-03-26 16:46:07
提问者慕粉2015574105 回复好帮手慕星星 #3

我在回答里分别粘贴了html css js的代码，谢谢您了！

2018-03-26 17:36:59