1、利用圖片width顯示位置來播放圖片，技術：.offsetWidth 、aBtn[i].index = i 、setInterval() 、oUl[0].style.left = 、onclick()
2、利用陣列放入圖片經行輪播，技術：setInterval()。沒有onclick()
BR> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict . dtd">
影像投影片
* {
邊距：0px;
填入：0px;
}
li {
邊框：0;
}
a {
文字裝飾：無;
}
#slide { }
#slide { 邊距：20px 自動；
位置：相對；
溢出：隱藏；
}
#slide ul {
位置：絕對；
左：0px；
上方：0px；
高度：400px；
寬度：11930px；
)
寬度：11930px；
約🎜> 高度： 400px；
溢出：隱藏；
浮動：左；
}
#slide .ico {
；
文字對齊：居中；
位置：絕對；
左：0 像素；
底部：10 像素； a {
顯示：內聯塊；
寬度：10px；
高度：10px；
背景：url(out.png) 無重複0px；
背景：url(out.png) 無重複0px 0px ;
}
#slide .ico .active {
背景：url(out1.png) 無重複0px 0px;
} 高度: 400px;
左: 0px;
頂部: 0px;
背景: url() 無重複0px 0px;<.> #btnLeft :hover {
背景: url() 無重複0px 0px;
}
#b2tn > 右: 0px;
頂部: 0px;
背景: url() 無重複0px 0px;
.位置: 絕對;
{
背景: url() no-repeat 0px 0px;
}
< ;script type="text/script...
var oIco = document.getElementById("ico");
var aBtn = oIco.getElementsByTagName("a" );
get 🎜> );
var oUl = oSlide.getElementsByTagName("ul");
var aLi = oUl[0].getElementsByTagName("li");
Le
var oBtnRight = document.getElementById("btnRight");
var baseWidth = aLi[0].offsetWidth; .width = baseWidth * aLi.length "px";
var iNow = 0;
for(var i=0;i
;
aBtn[i].onclick = function() {
//alert(this.index);
.index);
//aIco[this.index].className = "active";
}
}
/ /document.title = iNow;
move(iNow);
}
oBtnRight.onclick = function() {
move (iNow);
}
var curIndex = 0;
var timeInterval = 1000;
setInterval(change,timeInterval);
函數change() {
if(curIndex == aBtn.length) {
curIndex =0;
} else {
move(curIndex);
curIndex = 1;
curIndex = 1; }
}
function move(index) {
//document.title = index;
if(index>aLi.length-1) { if(index>aLi.length-1) { if(index>aLi.length-1) { 🎜 > }
if(index index = aLi.length - 1;
iNow = index; aBtn[n].className = "";
}
aBtn[index].className = "active";
oUl[0].style.left = -index * baseWidth "px""
; {
// 左：-index * baseWidth
// },8)
}
..身體>
圖片自動播放.html
> 
