24h購物| | PChome| 登入
2023-01-08 00:32:14| 人氣4| 回應0 | 上一篇 | 下一篇
推薦 0 收藏 0 轉貼0 訂閱站台

jQuery Devrama Slider 幻燈片 網站架設

網站架設


典範圖片
2.png

濫觞：http://www.shouce.ren/api/view/a/11273



若何利用

  1.   <script type="text/javascript">
  2.     $(document).ready(function(){
  3.       $('.front-demo').DrSlider({
  4.         navigationType: 'circle',
  5.         width: 1024, //圖片寬度
  6.         height: 400, //圖片高度
  7.         transition: 'slide-left', //標的目的
  8.         duration: 5000 //輪播一張圖片時候
  9.       });
  10.     });
  11.   </script>
複製代碼

Devrama Slider 是個圖象滑塊，帶有許多非常有趣的特性。

 

  1. <div class="slide1" data-lazy-background="4247776023_81a3f048ca_b.png">
  2. <h3 data-pos="['10%', '110%', '10%', '5%']" data-duration="700" data-effect="move">
  3.   Responsive
  4. </h3>
  5. <div class="description" data-pos="['60%', '110%', '60%', '60%']" data-duration="300" data-effect="move">
  6.   Automatically,
  7. </div>
  8. <div class="description" data-pos="['70%', '110%', '70%', '65%']" data-duration="300" data-effect="move">
  9.   it resizes
  10. </div>
  11. <div class="description" data-pos="['80%', '110%', '80%', '70%']" data-duration="300" data-effect="move">
  12.   with window size!!
  13. </div>
  14. </div>
複製代碼

它不但撐持圖象還撐持HTML 內容。響應式利便CSS3 轉換轉換結果進度條高級的預加載和延遲加載CSS 自定義用戶可以定義導航或者控制器

 

在線實例實例演示

 

1.png



本文出自:

我要檢舉
台長： caseycq3

您可能對以下文章有興趣

人氣(4) | 回應(0)| 推薦 (0)| 收藏 (0)| 轉寄
全站分類: 美食情報(食記、食譜、飲品) | 個人分類: NetYea |
此分類下一篇:在 Arduino IDE 上面安裝 ESP32 網站架設
此分類上一篇:網站架設 Arduino ESP32 若何 鍵盤節制 伺服馬

我要回應
否 是 (若未登入"個人新聞台帳號"則看不到回覆唷!)
* 請輸入識別碼：
請輸入圖片中算式的結果(可能為0) 
(有*為必填)
TOP
詳全文