上下,左右,透明度无缝轮播图

上下轮播;    //原理是

css样式;

            #box{
height:510px;
width: 1000px;
border: 1px solid #999999;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#tu{
position: absolute;
width: 1000px;
}

li{
list-style: none;
}
#box img{
height: 510px;

width: 1000px;

                              }

    HTML布局;

<div id ="box">

    <ul id="tu">

        <li><img src = "tu1" /></li>

        <li><img src = "tu2"/><li>

         <li><img src = "tu3" /></li>

        <li><img src = "tu1"/><li>                      //上下轮播要保证第一张和最后一张图相同

      </ul>  

        <ul id = "num">
    <li class="dy">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--双class名,两个左右按钮控制-->
<div class="btn left">&lt;</div>
<div class="btn right">&gt;</div>

   js样式;

        <script src="js/startmove.js" type = "text/javascript"></script>

        <script>

                                var obox = document.getElementById("box");
var otu = document.getElementById("tu");
var olist = otu.children;
var len = olist.length;
var imgy = olist[0].offsetHeight;

                            otu.style.height = imgy*len+"px";
var i=0;
var timer = setInterval(function(){
/* i++;
if(i==len){
//注意向上的无缝轮播为top值
//向左无缝轮播为left值为0
otu.style.top=0;
i=1;
}
if(i==-1){
otu.style.height = -imgy*(len-1)+"px"; 
i = len-2;
}
startMove(otu,{top:-imgy*i});    */
move();
},2000);
//封装一个函数使用
function move(){
i++;
//最后一个和第一个临界值时的判断
if(i==len){
otu.style.top=0;
i=1;
}
//第一张和第5张图片一样,显示完第一张后在显示的就为第4张()
if(i==-1){
otu.style.top= -imgy*(len-1)+"px";
i=len-2;
}

                            //加入数字    使数字颜色改变
for(var j= 0;j<onumlist.length;j++){
onumlist[j].className="";
}
if(i==len-1){
onumlist[0].className ="dy";
}else{
onumlist[i].className = "dy";
}
startMove(otu,{top:-imgy*i});
}

oleft.onclick = function(){
move();
}
oright.onclick = function(){
i = i-2;
move();
}

for(let k=0;k<onumlist.length;k++){
onumlist[k].onmouseover=function(){
i = k-1;
move();
}
}
//鼠标划入图片中停止轮播
obox.onmouseover = function(){
clearInterval(timer);
}
//鼠标划出图片中继续轮播
obox.onmouseout = function(){
timer = setInterval(function(){
move();
},2000);
}
</script>