間歇播圖

思路：

1，用動(dòng)畫來(lái)改變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)

呼吸輪播圖

思路

-用透明度來(lái)實(shí)現(xiàn)呼吸輪播圖
1，把該獲取的都獲取了，把該設(shè)置的都設(shè)置了
2，開(kāi)始輪播2
2，設(shè)置鼠標(biāo)移入停止
3，設(shè)置小圓點(diǎn)

            //把該獲取的都獲取了,該設(shè)置的設(shè)置了
            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;
            //開(kāi)始自動(dòng)輪播
            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";