具有自主知识产权的banner效果

首先来看一下效果，说它有自主知识产权 不是说我申请了什么知识产权，只是说是在我明白原理的基础上，自己实现的banner效果，以前做这种效果都是在网上copy类似的代码，有时候看着别人的代码一是乱，二是不明原理，所以自己就想一切从简，试着做出来了这么一个效果，这里面有一个不足之处就是切换图片时的效果，不是渐隐，也不是从左到右之类的，最老地的显示隐藏层的方式，下一步的目标就是在这个的基础上，进行加切换时的各种各样的效果，比如渐隐切换呀，从上到下呀之类的

 <div class="banner">
      <ul>
        <li id="img_1"> <img src="images/banner_Img1_36.jpg" width="979" height="243" /></li>
        <li id="img_2"> <img src="images/tel_baoxian_96.jpg" width="979" height="243" /></li>
        <li id="img_3"> <img src="images/pro_car_1_25.jpg" width="979" height="243" /></li>
        <li id="img_4"> <img src="images/pro_car_2_47.jpg" width="979" height="243" /></li>
      </ul>
      <ul class="SlideTriggers">
        <li class="current" id="banner_1" οnmοuseοver="banner('1')" >1</li>
        <li id="banner_2"  οnmοuseοver="banner('2')" >2</li>
        <li id="banner_3"  οnmοuseοver="banner('3')" >3</li>
        <li id="banner_4"  οnmοuseοver="banner('4')" >4</li>
      </ul>
    </div>

css部分

.banner ul
{
 list-style:none;
}
.SlideTriggers
{
 position:absolute;
 float:right;
 right:0px;
 right:30px;
 top:210px;
}
.SlideTriggers li
{
 width:24px;
 height:21px;
 float:left;
 text-align:center;
 margin:0 5px;
 line-height:21px;
 background:url(../images/banner_list_bg_03.gif) no-repeat;
}
.SlideTriggers li.current{
 cursor:pointer;
 background:url(../images/banner_list_current_05.gif) no-repeat;
 color:#fff;
}
.banner
{
 width:979px;
 height:243px;
 float:left;
 border:1px #ccc solid;
 padding:1px;
 background:#fff;
 margin-top:10px;
 margin-bottom:10px;
 overflow:hidden;
 position:relative;
}

js部分

var nn = 1;
var tt;
function init() {
    for (var i = 1; i <= 4; i++) {
        document.getElementById("banner_" + i).className = '';
    }
    document.getElementById("banner_" + nn).className = 'current';
    banner(nn);
    nn++;
    if (nn > 4) {
        nn = 1;
    }
    tt = setTimeout('init()', 3000);
}

function banner(index) {

    for (var i = 1; i <= 4; i++) {
        if (index == i) {
            $("#banner_" + i).addClass("current");
            nn = index; //把index的值传给nn是为了当鼠标经过哪时就从哪开始往下切换
            $("#img_" + i).show();
        } else {
            $("#banner_" + i).addClass("").removeClass("current");
            $("#img_" + i).hide();
        }
    }
}