JS CSS自動改變切換方向的圖片幻燈切換效果
正文,div,ul,li{邊距:0;填入:0;}
ul{列表樣式類型：無;}
正文{背景：#000;文字對齊：中心;字型：12px/20px Arial;}
#box{位置：相對；寬度：322px；高度：172px；背景：#fff；邊框半徑：5px；邊框：8px 實心#fff；邊距：10px auto；}
#box .list{位置：相對；寬度：320px；高度：240px；溢位：隱藏；邊框：1px實體#ccc；}
#box .list li{位置：絕對；上：0；左側：0；寬度：320px；高度：240px；不透明度：0；過濾器：alpha(不透明度=0);}
#box .list li.current{opacity:1;filter:alpha(opacity=100);}
#box .count{位置：絕對；右：0；底部：5px；}
#box .count li{顏色:#fff;浮動:左;寬度:20px;高度:20px;遊標:指標;右邊距:5px;溢位:隱藏;背景:#F90;不透明度:0.7;濾鏡:alpha (不透明度=70);邊框半徑:20px;}
#box .count li.current{顏色:#fff;不透明度:1;過濾器:alpha(不透明度=100);字體粗細:700;背景:#f60;}
#tmp{寬度：100px；高度：100px；背景：紅色；位置：絕對；}
風格>
window.onload = function ()
{
var oBox = document.getElementById("box");
var aUl = document.getElementsByTagName("ul");
var aImg = aUl[0].getElementsByTagName("li");
var aNum = aUl[1].getElementsByTagName("li");
var time = play = null;
var i = 索引 = 0;
var bOrder = true;
// 切換按鈕
for (i = 0; i
{
aNum[i].index = i;
aNum[i].onmouseover = function ()
{
顯示(this.index)
}
}
//滑鼠劃過關閉定時器
oBox.onmouseover = function ()
{
清除間隔（播放）
};
//滑鼠離開啟動自動播放
oBox.onmouseout = function ()
{
自動播放()
};
//自動播放函數
函數自動播放()
{
播放 = setInterval(function () {
//判斷播放順序
邊界 ？索引：索引--；
//正序
索引 >= aImg.length && (索引 = aImg.length - 2, bOrder = false);
// 倒序
索引
//呼叫函數
顯示(索引)
},2000);
}
autoPlay();//應用程式
函數展示(一)
{
索引 = a;
var alpha = 0;
for (i = 0; i
aNum[index].className = "當前";
清除間隔（計時器）；
for (i = 0; i
{
aImg[i].style.opacity = 0;
aImg[i].style.filter = "alpha(不透明度=0)";
}
計時器 = setInterval(function () {
阿爾法 = 2;
阿爾法> 100 && (阿爾法=100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " alpha ")";
alpha == 100 && 清除間隔（計時器）
},20);
}
};
腳本>
頭>
