<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles/for.css"/>
<script type="text/javascript" src="js/for.js"></script>
</head>
<body>
<div id="pic">
<img src="images/1.jpg" />
<p>正在加载中......</p>
<span>数量正在加载中......</span>
<ul></ul>
</div>
</body>
</html>
#pic{
max-width:600px;
width:600px;
}
#pic img{
max-width:600px;
width:600px;
}
#pic ul{
padding:0;
position:absolute;
top:80px;
left:580px;
}
#pic li{
list-style: none;
width:20px;
height:20px;
background-color:#000;
margin:5px;
}
#pic p{
display: inline-block;
border:1px solid #000;
background-color: #9acfea;
padding:1% 8%;
position: absolute;
top:340px;
left:140px;
}
#pic span{
display: inline-block;
border:1px solid #000;
position: absolute;
top:8px;
left:270px;
background-color: #9acfea;
font-size:28px;
}
window.onload = function() {
var oDiv = document.getElementById('pic');
var oImg = oDiv.getElementsByTagName('img')[0];
var oSpan = oDiv.getElementsByTagName('span')[0];
var oP = oDiv.getElementsByTagName('p');
var oUl = oDiv.getElementsByTagName('ul');
var aLi = oUl.getElementsByTagName('li');
var arrUrl = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg', 'images/4.jpg'];
var arrText = ['一', '二', '三', '四'];
var num = 0;
for (var i = 0; i < arrUrl.length; i++) {
oUl.innerHTML += '<li></li>';
}
oImg.src = arrUrl[num];
oSpan.innerHTML = 1 + num + '/' + arrUrl.length;
oP.innerHTML = arrText[num];
aLi[num].className = 'active';
for (var i = 0; i < aLi.length; i++) {
aLi[i].onclick = function () {
oImg.src = arrUrl[ this.index ];
oP.innerHTML = arrText[ this.index ];
oSpan.innerHTML = 1+this.index + ' / '+arrText.length;
for( var i=0; i<aLi.length; i++ ){
aLi[i].className = '';
}
this.className = 'active';
}
};
};
以上是我跟着视频写的代码，视频做出来的效果是图片轮播。
我的效果几户是没写
不知道哪里有问题 烦请大家帮我看看