javascript 垂直輪播(跑馬燈、vertical carousel)

javascript 垂直輪播(跑馬燈、vertical carousel)

這邊使用一個別於<marquee>的用法

這是在網路上找到的
(很抱歉我忘記出處了 如果有人知道的話請告訴我 謝謝)
然後小小改了一點
主要是利用overflow跟scrollTop這兩個屬性
overflow:hidden的意思就是
當內容超過長度或寬度的時候
不顯示滾動條
而是直接隱藏超過的部份
scrollTop則是目前滾動條與最上面的距離
首先設定一個style(也可以直接放在標籤裡)

以下為《CSS》原始碼

.ann{overflow:hidden;height:20px;}

<div id="ann_box" class="ann" style="width:100px;"> 
  <div id="a1" class="ann"><a href="exp01.php" >exp01</a></div> 
  <div id="a2" class="ann"><a href="exp02.php" >exp02</a></div> 
  <div id="a3" class="ann"><a href="exp03.php" >exp03</a></div> 
  <div id="a4" class="ann"><a href="exp04.php" >exp04</a></div> 
  <div id="a5" class="ann"><a href="exp05.php" >exp05</a></div> 
</div> 

以下為《JS》原始碼

function slideLine(box,stf,delay,speed,h) 
{ 
  //取得id 
  var slideBox = document.getElementById(box); 
  //預設值 delay:幾毫秒滾動一次(1000毫秒=1秒) 
  //       speed:數字越小越快，h:高度 
  var delay = delay||1000,speed = speed||20,h = h||20; 
  var tid = null,pause = false; 
  //setInterval跟setTimeout的用法可以咕狗研究一下~ 
  var s = function(){tid=setInterval(slide, speed);} 
  //主要動作的地方 
  var slide = function(){ 
  //當滑鼠移到上面的時候就會暫停 
    if(pause) return; 
  //滾動條往下滾動 數字越大會越快但是看起來越不連貫，所以這邊用1 
    slideBox.scrollTop += 1; 
  //滾動到一個高度(h)的時候就停止 
    if(slideBox.scrollTop%h == 0){ 
  //跟setInterval搭配使用的 
      clearInterval(tid); 
  //將剛剛滾動上去的前一項加回到整列的最後一項 
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]); 
  //再重設滾動條到最上面 
      slideBox.scrollTop = 0; 
  //延遲多久再執行一次 
      setTimeout(s, delay); 
    } 
  } 
  //滑鼠移上去會暫停 移走會繼續動 
  slideBox.onmouseover=function(){pause=true;} 
  slideBox.onmouseout=function(){pause=false;} 
  //起始的地方，沒有這個就不會動囉 
  setTimeout(s, delay); 
} 
//網頁load完會執行一次 
//五個屬性各別是：外面div的id名稱、包在裡面的標籤類型 
//延遲毫秒數、速度、高度 
slideLine('ann_box','div',2000,25,20); 

不過如果原本有使用framework如prototype或是jquery的
可以直接找他們的plugin來使用(怎麼最後才講XD)
這裡的用法是
當如果這網頁沒有要load哪個framework的時候
但是又想要有個輪播功能
就可以節省load的時間囉
是不是～

注意：scrollTop、scrollLeft有些瀏覽器不支援(不過ie跟fx都有)