網頁

2015年8月3日 星期一

EZoApp 範例- 以 bxslider元件 做 圖片輪播

圖片網址:
烏來  圖片大小:600x338
https://lh3.googleusercontent.com/-YJjn48WHewA/Vb12esqV38I/AAAAAAAABWY/LUn_7sCY3EA/s600-Ic42/wulai.jpg

十分瀑布 圖片大小:500x281

https://lh3.googleusercontent.com/-FwAVR6Exhaw/Vb12etQE8_I/AAAAAAAABV4/_otjGplpLzs/s500-Ic42/tenwaterfall.jpg

太子賓館 圖片大小:400x225

方法:

1 page , id :  home

插入 bxslider元件 ( extension components)
Style : height:338px;width:100% (height改為三張圖片的最大高度值,以我的例子是338 

切換到 HTML標籤
每一對  li 放一張圖片,請修改其height(圖片高度)src(圖片的來源網址)title(滑鼠移到這張圖片,要顯示的文字) 。我用紅色的字標出。

<div id="home" data-role="page">
  <div role="main" class="ui-content">
    <ul is="bxslider" style="height:338px;width:100%" captions="true">
      <li>
        <img style="width:100%;height:338px" src="https://lh3.googleusercontent.com/-YJjn48WHewA/Vb12esqV38I/AAAAAAAABWY/LUn_7sCY3EA/s600-Ic42/wulai.jpg" title="烏來">
      </li>
      <li>
        <img style="width:100%;height:281px" src="https://lh3.googleusercontent.com/-FwAVR6Exhaw/Vb12etQE8_I/AAAAAAAABV4/_otjGplpLzs/s500-Ic42/tenwaterfall.jpg" title="十分瀑布">
      </li>
      <li>
        <img style="width:100%;height:225px" src="https://lh3.googleusercontent.com/-hcZEP3BVutc/Vb12eUimPNI/AAAAAAAABVw/Hy3ZNWqP_w8/s400-Ic42/tai.jpg" title="太子賓館">
      </li>
    </ul>
  </div>
</div>

Resize :rotate ,因圖片寬度的數值比高度大,所以將面板旋轉。

1 page設計參考圖:


1 page執行參考圖:

沒有留言 :

張貼留言