分享一個好用的jQuery跑馬燈套件als

最近在更新佈景程式要吧原本用很久的javaScript寫的跑馬燈換掉，改用HTML5+jQuery的跑馬燈，剛好找到這個http://als.musings.it/網站有很多最新的JS移動套件可以使用，且維護容易，不過參數及CSS需要修改一下才能使用，以下為修改過後跑馬燈CODE直接套用就可以使用了。

1、先去http://als.musings.it/網站下載jquery.als-1.7.js

2、然後引入jquery.als-1.7.js與加上設定參數(效果是文字由下往上滑動，更多滑動方式可以參考als網站的說明)

<script type="text/javascript" src="js/jquery.als-1.7.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#lista1").als({
 visible_items: 1,
 scrolling_items: 1,
 orientation: "vertical",
 circular: "yes",
 autoscroll: "yes",
 interval: 4000,  //跑馬燈速度毫秒 
 speed: 50,
easing: "linear",
start_from: 0
 });
});
</script>

3、於CSS檔案中加上以下的設定，高度寬度及樣式可自行調整增加

#als-div {
        position: relative;
width: inherit;
height: 43px;
bottom: 37px;
opacity: 0.9;
z-index: 50;
}
.als-container {
position: relative;
width: 100%;
z-index: 0;
}
.als-viewport {
position: relative;
overflow: hidden;
text-align: left;
}
.als-wrapper {
position: relative;
list-style: none;
}
.als-item {
position: relative;
display: block;
text-align: left;
cursor: pointer;
font-size: 100%;
height: 29px;
overflow: hidden;
}
.als-item a {
color: #FFFFFF;
}
.als-item a:hover {
color: #C4C4C4;
}

4、在HTML檔案中加上要放置跑馬燈的結構語法(可以改成php迴圈傳值smarty方式)

<section id="als-div">
  <div id="lista1" class="als-container">
    <div class="als-viewport">
      <div class="als-wrapper">
        <div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>
        <div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>
        <div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>
        <div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>
        <div class="als-item">跑馬燈文字跑馬燈文字跑馬燈文字跑馬燈文字</div>
      </div>
    </div>
  </div>
</section>

這樣就能使用als跑馬燈，好處是跟bootstrap.js沒有衝突的問題，推薦給大家!!

教學撰寫：徐嘉裕 Neil hsu