间歇播图

思路：

1，用动画来改变ul的高度值；

1，获取ul

2，改变高度值

var oUl=document.getElementsByTagName("ul")[0];

oUl.innerHTML += oUl.innerHTML;

var i =1 ;

setInterval(function(){

   animate(oUl,{top:-40*i},500,function(){

   i++;

   if (i==4){

   oUl.style.top = "0px";

   i=1;

   }

});

},1000)

呼吸轮播图

思路

-用透明度来实现呼吸轮播图
1，把该获取的都获取了，把该设置的都设置了
2，开始轮播2
2，设置鼠标移入停止
3，设置小圆点

            //把该获取的都获取了,该设置的设置了
            var carousel = document.getElementById("carousel");
            var lis=document.getElementById("imageslist").getElementsByTagName("li");
            var leftBth = document.getElementById("leftBtn");
            var rightBth = document.getElementById("rightBtn");
            var circlesLi = document.getElementById("circles").getElementsByTagName("li");
            var imgLength = lis.length;
            var width =560;
            var aninatetine = 300;
            var tween = "Linear";
            var inerval = 2000;
            var idx = 0;
            //开始自动轮播
            var timer = setInterval(rightBtnHandler,interval);
            carousel.onmouseover = function(){
                clearlnterval(timer);
            }
            carousel.onmouseout = function(){
                timer = setInterval(rightBtnHandler,interval);
            }
            rightBtn.onclick = rightBtnHandler;
            function rightBtnHandler(){
                if(lis[idx].isanimated)return;
                animate(lis[idx],{"opacity":0},1000);
                idx++;
                if (idx>imgLength -1) {
                    idx = 0;
                }
                animate(lis[idx],{"opacity":1},1000);
                changeCircle();
            }
            leftBtn.onclick = function(){
                if (lis[idx].isanimated)return; 
                animate(lis[idx],{"opacity"0},1000);
                idx--;
                if(idx<0){
                    idx = imglength -1;
                }
                animate(lis[idx],{"opacity":1},1000)
                changeCitcle();
            }
            for(var i=0;i<inglength -1;i++){
                circlesLi[i]index=i;
                circlesLi[i].onclick = function(){
                    if (lis[idx].isanimated) return;
                    animate(lis[idx],{"opacity":0},1000)
                    idx = this.index;
                    animate(lis[idx],{"opacity:":1},1000)
                    changeCircle(;)
                }
            }
            function changeCorcle(){
                for(var i=0;i<circlesLilength;i++){
                    circlesLi[i].className= "";
                }
                circlesli[idx].className = "cur";