輪播 呼吸輪播

注意：1:所有的img初始狀態都為絕對定位，display:none(防止鏈結**出錯)，opacity:0

,只有含有cur類的img的display:block，opacity:1

.2:注意截流（防止使用者狂點）

3:使用了運動框架animate.js

html：

js**：

var carrousel = document.getelementbyid('carrousel'); 

var ul = carrousel.getelementsbytagname("ul")[0];
var lis = ul.getelementsbytagname("li");
var leftbtn = document.getelementbyid("leftbtn");
var rightbtn = document.getelementbyid("rightbtn");
var circlesli = document.getelementbyid("circles").getelementsbytagname("li");
var imagelength = lis.length
var idx = 0;
var timer = setinterval(righthandle,2500);
rightbtn.onclick = righthandle;
carrousel.onmouseover = function()
carrousel.onmouseout = function()
function righthandle() ,1000,function()
lis[idx].style.display = "block";//新圖淡入
lis[idx].style.opacity = "0";
lis[idx].style.filter = "alpha(opacity=0)";
animate(lis[idx], ,1000,);
changecircle();
});}
leftbtn.onclick = function () ,1000,function()
lis[idx].style.display = "block";
lis[idx].style.opacity = "0";
lis[idx].style.filter = "alpha(opacity=0)";
animate(lis[idx], ,1000,);
changecircle();})}
for(var i = 0 ;i <= lis.length-1 ;i++ ),1000,function(),1000);
changecircle();
});}
})(i);
}function changecircle()
//第訊號量這個小圓點加cur
circlesli[idx].classname = "cur";
}

老圖：display:block ,opacity:1   --------->  display:none,opacity:0

新圖：display:none,opacity:0   ---------->   display:block ,opcity:1

輪播 位置輪播

位置輪播法 只有三個位置供來回切換。其他的由於絕對定位被遮擋住了。類似於上圖，在1,2進行交換，在顯示區域顯示。原理 左拉步驟 老圖拉到1，再把新圖拉到2等待，新圖再拉到顯示區域。如果在左邊就實現右拉的步驟，如果在右邊就實現左拉的步驟。html js 我使用的時560 x 300 imgwidth ...

js無縫輪播 和淡入淡出輪播

完美運動框架 function move obj,json,fn else 因為要做快取運動，因此需要計算速度 速度是乙個不定值 公式 目標值 當前物件的位置 係數 建議是8 考慮的問題 計算機處理小數有問題因此需要將小數乾掉，我們要進行向上取整和向下取整 算速度 var speed json at...

文字上下輪播

之前也寫過兩篇程式猿生涯的文章.後面都給刪掉了 一直想重新寫起來 把一些碼 遇到的一些坑給記下來,一直忘記,也一直拖著,拖延症越來越嚴重了.回到主題吧.最近做專案 遇到乙個小效果.對的 只是乙個小效果而已 就是文字上下輪播 一樣.但是基本可以解決需求.現學現用.問題也可以解決但是並不知道這個東西是怎...