17. 輪播圖

一、backstretch jquery 套件

1. 官網：http://srobbin.com/jquery-plugins/backstretch/
2. 下載：https://raw.githubusercontent.com/srobbin/jquery-backstretch/master/jquery.backstretch.min.js
3. 存在：creative/js/

二、使用方法

1. 由於是jquery的套件，故必須將程式放在jquery.js的後面引入

   
       <!--輪播-->
       <script src="js/jquery.backstretch.min.js"></script>

    

2. 調用插件

   
       <script type="text/javascript">
         $(document).ready(function(){
           $('.header').backstretch([
              "img/header.jpg"
            , "img/header_1.jpg"
            , "img/header_2.jpg"
            ], {duration: 3000, fade: 750});
         });
       </script>

    

3. 上傳圖片 1900 x 1267 header_1.jpg 、header_2.jpg 傳至 img底下
4. 在「<header class="header">」
5. 取消 css/creative.min.css

   background-image:url(../img/header.jpg)