这个轮播效果老是报错，写的没有逻辑。希望老师可以实现这种效果的代码案例学习

效果图

下面是需要用到的image图

脚本要求（效果可参考gif图）

     1、图片每1秒钟切换1次。

     2、当鼠标停留在整个页面上时，图片不进行轮播。

     3、当点击切换页的选项上时，出现该选项的对应图片，而且切换页选项的背景颜色发生相应的变化。

     4、当图片发生轮播切换时，在不点击选项卡的前提下，相应的选项卡背景颜色也自动发生变化。

html代码：

<div class="main" id="main">

<!-- 导航 -->

<div class="nav">

<ul class="ul_nav">

<li>

<a href="">首页</a>

</li>

<li>

<a href="">点击查看</a>

</li>

<li>

<a href="">会自动的</a>

</li>

<li>

<a href="">我的网站</a>

</li>

</ul>

</div>

<!-- 图片轮播 -->

<div class="banner" id="banner">

<div class="bg_img_01 back show">

<a href="">

<img src="image/1.jpg">

</a>

</div>

<div class="bg_img_02 back">

<a href="">

<img src="image/2.jpg">

</a>

</div>

<div class="bg_img_03 back">

<a href="">

<img src="image/3.jpg">

</a>

</div>

<div class="bg_img_04 back">

<a href="">

<img src="image/4.jpg">

</a>

</div>

</div>

</div>

css代码如下

.main{

width: 1200px;

height: 500px;

background: red;

margin:20px auto;

}

.main .nav{

width: 1200px;

height: 40px;

background: blue;

}

.main .nav .ul_nav{

width: 1200px;

height: 40px;

float: left;

}

.main .nav .ul_nav li{

float:left;

display: block;

}

.main .nav .ul_nav li a{

width: 300px;

height: 40px;

text-align: center;

font-size: 16px;

line-height: 40px; 

color: #fff;

display: inline-block;

}

.main .nav .ul_nav li a:hover{

border-radius:10px 10px 0  0;

display: block;

background:yellow;

color: #000;

}

.main .banner{

width: 1200px;

height: 460px;

background: #000;

overflow:hidden;   /*隐藏*/

}

.main .banner .bg_img_01{

width: 1200px;

height:460px;

}

.main .banner .back img{

display:none;

}

.main .banner .show img{

display: block;

}

java代码

function byId(id){

return typeof(id) === "string"?document.getElementById(id):id;

}

var index=0,

timing=null, //定时器

pics = byId("banner").getElementsByTagName("div"),    //获取banner下所有的div

oimg = byId("banner").getElementsByTagName("img"),

len = pics.length;  //长度获取

function slideImg(){

var main =byId("main");

//滑过清除定时器i离开继续

main.onmouseover = function(){

//滑过清除定时器

}

main.onmouseout = function(){   //鼠标离开时触发代码

timing = setInterval(function(){

index++;

if(index >= len){

index = 0;

}

//切换图片

changeImg();   //图片切换函数名

},1000);

}

}

//定义切换图片函数

function changeImg(){

pics[oimg].style.display = 'block';

}

slideImg();

报错原因

一直都在获取，一直报错一上午没弄明白是在弄不出来