java定时器报错,定时器设置报错

麻烦老师看一下,报错原因:

轮播.html:136 Uncaught TypeError: Cannot set property 'onmouseover' of null

at slideImg (轮播.html:136)

at 轮播.html:153

slideImg    @    轮播.html:136    (anonymous)    @    轮播.html:153

找了一下没有找到解决办法。

html>

综合实例

*{

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;

background-repeat: no-repeat;

position:absolute;

display:none;

}

.slide1{

background-image:url("C:/huaXiaXia/Sublime%20Text%203/教辅/实现轮播教辅/JavaScript实现轮播特效(代码)/img/bg1.jpg");

}

.slide2{

background-image:url("C:/huaXiaXia/Sublime%20Text%203/教辅/实现轮播教辅/JavaScript实现轮播特效(代码)/img/bg2.jpg");

}

.slide3{

background-image:url("C:/huaXiaXia/Sublime%20Text%203/教辅/实现轮播教辅/JavaScript实现轮播特效(代码)/img/bg3.jpg");

}

.slide-active{

display:block;

}

.button{

position:absolute;

width:40px;

height:80px;

left:244px;

top:50%;

margin-top:-40px;

background-color:green;

background: url("C:/huaXiaXia/Sublime%20Text%203/教辅/实现轮播教辅/JavaScript实现轮播特效(代码)/img/arrow.png") no-repeat center center;

}

.pre{

transform:rotate(180deg);

}

.next{

left:auto;

right:0;

}

.button:hover{

background-color:#333;

opacity:0.5;

filter:alpha(opacity:50);

}

.dots{

position:absolute;

right:20px;

bottom:24px;

text-align:right;

}

.dots span{

display:inline-block;

width:12px;

height:12px;

border-radius:50%;

/*rbga,a为透明度*/

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

/*阴影,水平 垂直 距离 模糊程度 颜色 内阴影*/

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

margin-left:8px;

line-height:12px;

cursor:pointer;

}

.dots span.active{

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

background:#fff;

}

//封装一个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(){

//setTimeout超时定时器 setInterval界限调用

timer=setInterval(function(){

index++;

if(index>=len){

index = 0;

}

//切换图片

// changeImg();

console.log(index);

},2000);

}

}

slideImg();

//切换图片

// function changeImg(){

//  //遍历banner下的所有div将其隐藏

//  for(var i=0;i

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

//  }

//  //根据index所有找到div将其显示出来

//  pics[index].style.display='block';

// }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值