html网页引用js不执行,是我的html有问题还是?
问题描述:
这是html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>音乐星球</title>
<link rel="stylesheet" type="text/css" href="css/music.css">
<script src="js/music.js" type="text/javascript"/></script>
</head>
<body bgcolor="black">
<div id="header">
<div class="logo">
<div class="lo">
<ul>
<li><img src="img/logo.PNG"></li>
<li><a href="">发现音乐</a></li>
<li><a href="">我的音乐</a></li>
<li><a href="">朋友</a></li>
<li><a href="">VIP</a></li>
<li><a href="">客户端</a></li>
</ul>
<form class="right"><a href="">登录</a>
</form>
<form>
<input type="" placeholder="音乐、MV、用户" class="inp">
</form>
</div>
</div>
<hr color="#7a7374">
<div class="dh">
<ul>
<li><a href="">推荐</a></li>
<li><a href="">排行榜</a></li>
<li><a href="">歌单</a></li>
<li><a href="">歌手</a></li>
<li><a href="">MV</a></li>
<li><a href="">数字专辑</a></li>
<li><a href="">票务</a></li>
</ul>
</div>
<div class="lunboContainer">
<div class="lunboLeft"><!--轮播图向左移动-->
<img src="#" id="leftImg">
</div>
<div class="lunboRight"><!--轮播图向右移动-->
<img src="#" id="rightImg">
</div>
<ul id="imgList">
<li class="item active"><img src="img/dh1.jpg"></li>
<li class="item"><img src="img/dh2.jpg"></li>
<li class="item"><img src="img/dh3.jpg"></li>
<li class="item"><img src="img/dh4.jpg"></li>
<li class="item"><img src="img/dh5.jpg"></li>
</ul>
<ul id="pointList"><!-- 轮播图下面的小点点,点哪个点显示对应的图片-->
<li class="point active" data-index='0'></li>
<li class="point" data-index='1'></li>
<li class="point" data-index='2'></li>
<li class="point" data-index='3'></li>
<li class="point" data-index='4'></li>
</ul>
</div>
</div>
<div id="nav">
<div class="gd">
</div>
<div class="zs">
</div>
<div class="po">
</div>
</div>
<div id="footer">
<div class="yw">
</div>
</div>
</body>
</html>
这是js代码
var index=0;
var imgs=document.getElementsByClassName("item");//图片
var leftImg=document.getElementById("leftImg");//向左
var rightImg=document.getElementById('rightImg');//向右
var points=document.getElementsByClassName("point");//小点点
var timeOut=0;
function clearActive(){
for(var i=0;i<imgs.length;i++){
imgs[i].className='item';
points[i].className='point';
}
}
function goNext(){
clearActive();
index++;
index=index%imgs.length;
imgs[index].className='item active';
points[index].className='point active';
timeOut=0;
}
function goPre(){
clearActive();
index--;
if(index<0){
index=imgs.length-1;
}
imgs[index].className='item active';
points[index].className='point active';
}
/*当鼠标悬停在向左向右的图片上方时需要改变图片样式使用户得到相应的反馈,这里学习了小米商城主页轮播图的做法,只用一张图片,通过改变这张图片到边界的距离实现样式改变*/
function preHover(){
leftImg.style.marginLeft="0px";
}
function nextHover(){
rightImg.style.marginLeft="-1300px";
}
function preHout(){
leftImg.style.marginLeft="-2600px";
}
function nextHout(){
rightImg.style.marginLeft="-3900px";
}
/*************************************************/
function jmpByPoint(pointIndex){
clearActive();
index=pointIndex;
imgs[index].className="item active";
points[index].className='point active';
timeOut=0;
}
for(var i=0;i<points.length;i++){
points[i].addEventListener('click',function(){
var pointIndex=this.getAttribute("data-index");
jmpByPoint(pointIndex);
})
}
leftImg.addEventListener('click',function(){
goPre();
})
leftImg.addEventListener('mouseover',function(){
preHover();
})
leftImg.addEventListener('mouseout',function(){
preHout();
})
rightImg.addEventListener('click',function(){
goNext();
})
rightImg.addEventListener('mouseover',function(){
nextHover();
})
rightImg.addEventListener('mouseout',function(){
nextHout();
})
setInterval(function(){
timeOut++;
if(timeOut==10){
goNext();
timeOut=0;
}
到底哪里的问题呢?
答
//最简单的是 下面这行代码换个位置,放在82行上面,而且你多了个单斜杠 /
<script src="js/music.js" type="text/javascript"></script>
答
是不是多script标签多加了一个斜杠?
是不是多script标签多加了一个斜杠?
答
引用js那行代码有问题,仔细看一下位置和标点符号