Follow Fang!: jQuery Cycle 文字輪播器

2013/09/02

jQuery Cycle 文字輪播器

之前有用JQuery實做過照片輪播『HTML5 使用 JQuery Cycle Plugin』，這次用途主要是拿來當跑馬燈用的，不過希望能夠作成輪播的方式，可能會比較漂亮吧XD

這次有用ClearType的效果，ClearType是提昇文字的解析度，並且讓R, G, B像素更亮
每三秒鐘切換一次，0.4秒會切換到一個文字

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>JS輪播範本</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>
  </head>
  
  <body>

  <style type="text/css">
    body{
      background-color: #808080;
    }
 
    #slideshow {   
      color: #FF80C0;
      font-size: 20pt;
      margin-left: 40%;
      margin-top: 30%;
    }
  </style>
  
  <script type="text/javascript">
    $(function() {
      $('#slideshow').cycle({ timeout: 3000, cleartype: 1, speed: 400, cleartypeNoBg = true  });
    });
  </script>
 
  <div id="slideshow">
    <div>這是一個輪播的範本</div>
    <div>會根據目前的排序去輪播</div>
    <div>時間間格大概就是3秒鐘</div>
  </div>
 
  </body>
</html>

參考資料：
http://jquery.malsup.com/cycle/cleartype.html
http://blog.yam.com/hanasan/article/35806444
http://www.1keydata.com/css-tutorial/tw/div-span.php