<!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'; } };};以上是我跟着视频写的代码，视频做出来的效果是图片轮播。我的效果几户是没写不知道哪里有问题 烦请大家帮我看看
添加回答
举报
0/150
提交
取消