JS CSS實現自動改變切換方向圖片幻燈切換效果的方法_javascript技巧

本文實例講述了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);
 }
};
腳本>
頭>

   

       
• 

       
• 

       
• 

       
• 

       
• 

   

   

       
• 1

       
• 2

       
• 3

       
• 4

       
• 5