在模仿写暴风的首页，但是到轮播图那一块总是报错，查了几次都没找到原因，大佬们救救我这个菜鸟吧，不说了上代码

1 第一部分是html代码
   <!DOCTYPE html>
<html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/idnex.css">
</head><body>
    <div class="header">
        <div class="inner clearfix">
            <a href="#" class="fl logo"></a>
            <ul class="fr">
                <li><a href="#">登陆</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">开通vip</a></li>
                <li><a href="#">个人中心</a></li>
                <li><a href="#">暴风首页</a></li>
            </ul>
        </div>
    </div>
    <!-- banner区域 -->
    <div class="banner inner">
        <div class="bannerTop">
           <a href="">首页</a>
           <a href="">点播片库</a>
           <a href="">激活码兑换</a>
        </div>
        <div class="bannerBottom ">
            <ul class="ulo"></ul>
            <p class="po"></p>
        </div>
          
    </div>    <script src="js/new.js"></script>
    <!-- main区 -->
    <div class="mian inner">
        <div>
            <h1>VIP特权</h1>
            <div>
             <button><</button>
             <img src="" alt="">  
             <button>></button> 
            </div>
        </div>
    </div>
</body></html>
2、css代码
@charset "utf-8";
.inner{
    width: 1100px;
    margin: 0 auto
}
.header{
    width: 100%;
   
    background-color: #e7e7e7;
    border-bottom: 1px solid #c7c4c5;
}
.header .inner .fl{
    margin: 17px 0 0 18px;}
.header .inner .logo {
   display: inline-block;
   width: 190px;height: 30px;
    background: url(../img/logo_03.jpg) no-repeat;
}
.header .fr li{
    float: left;
    line-height: 65px;
    font-size: 14px;
    padding: 0 15px;
   
}
.header .fr li a{
    color: #686868;
}
/*banner*/
.bannerTop {
background: #2c3134;}
.bannerTop a{
    line-height: 38px;
    color: #fff;
    font-size: 14px;
}
.bannerTop a:nth-child(1){
    padding: 10px 44px 11px;
    background: blue;
    margin-left: 44px;
}
.bannerTop a:nth-child(2){
    padding: 10px 29px 11px 32px;
}
.bannerTop a:nth-child(3){
    padding: 10px 20px 11px 26px;
}
/* 轮播图 */
.bannerBottom{
    width: 1100px;height: 500px;
    position: relative;
    overflow: hidden;
}
.bannerBottom img{
width: 1100px;height: 500px;
}
.bannerBottom ul{
    width: 9900px;
}
.bannerBottom li{
    float: left;
}
.bannerBottom p{
position: absolute;
bottom: 20px;width: 100%;text-align: center;
}
.bannerBottom span{
    padding: 2px 8px;background: gold;
    margin-right: 10px;
}
.bannerBottom .active{
    background: red;
}
3、js代码
    var bBottom = document.getElementsByClassName('bannerBottom');
    var oUl = document.getElementsByClassName('ulo')[0];
    var oP = document.getElementsByClassName('po')[0];
    var li = oUl.getElementsByTagName('li');
    var span = oP.getElementsByTagName('span');
   //静态布局
    var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg']
    //jing tai bu ju
    var str1 = '';
    var str2 = '';
    for (var i = 0; i < arr.length; i++) {
        str1 += '<li><img src="' + arr[i] + '" alt =""></li>';
        str2 += '<span>' + (i + 1) + '</span>';
    }
    oUl.innerHTML = str1 //+ '<li><img src="img/1.jpg" alt =""></li>';
    oP.innerHTML = str2;
}
    //初始化样式 
     span[0].className = 'active'   //运行就报错
  
   // 自动切换
   var n =0;
   var timer = setInterval(autoNext,3000);
   function autoNext(){
       n++;
       if(n == arr.length+1){
           n = 1;
           oUl.style.left = '0px';
       }
    move(oUl,'left',10,-1100*n)
    for(var i=0;i<span.length;i++){
        span.className=''
    }
    if(n==arr.length){
        span[0].className ='active'
    }else{
        span[n].className ='active'
    }
   }function move(obj,tag,stopValue,attr){
 tag = stopValue>parseInt(getStyle(obj,attr))?tag:-tag;
 clearInterval(obj.timer);
 obj.timer=setInterval(function(){
     var speed = parseInt(getStyle(obj,attr))+tag;
     if(speed<=stopValue&&tag<0||speed>=stopValue&&tag>0){
         speed=stopValue;
     }
     obj.style[attr]=speed+'px';
     if(speed==stopValue){
         clearInterval(obj.timer)
     }
 },1000)

解决方案 »

  1.   

    var span = oP.getElementsByTagName('span');  //这行放到下面......//初始化样式 
    var span = oP.getElementsByTagName('span'); 
    span[0].className = 'active'   //运行就报错
      

  2.   

     var li = oUl.getElementsByTagName('li');     //  代码从上向下执行 执行到此处时候没有Li  获取到li为空
        var span = oP.getElementsByTagName('span');    //  代码从上向下执行 执行到此处时候没有span  所有此时span 为空
       //静态布局
        var arr = ['img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg', 'img/5.jpg', 'img/6.jpg', 'img/7.jpg', 'img/8.jpg', 'img/9.jpg']
        //jing tai bu ju
        var str1 = '';
        var str2 = '';
        for (var i = 0; i < arr.length; i++) {
            str1 += '<li><img src="' + arr[i] + '" alt =""></li>';
            str2 += '<span>' + (i + 1) + '</span>';
        }
        oUl.innerHTML = str1 //+ '<li><img src="img/1.jpg" alt =""></li>';
        oP.innerHTML = str2;
    }
        //初始化样式 
         span[0].className = 'active'   //运行就报错    找不到 当然报错  另外不要用html 标签起名 
      

  3.   

    所以把获取li 和span 的 代码  放到你添加的后边就应该没问题了