搜尋
首頁每日程式設計html知識Mip輪播圖組件中的重要屬性講解

本篇文章主要跟大家介紹MIP輪播圖組件中的重要屬性講解。

MIP,行動網頁加速器。關於MIP輪播圖組件的介紹,我們在先前的文章中,已經透過舉例一個輪播圖元件,來給大家介紹MIP元件的使用。那麼這個簡單的輪播圖元件範例就是

則表示用來支援MIP 中圖片的一種展示方式,支援多圖輪播。

推薦參考MIP使用手冊:《MIP文檔手冊

#下面我們就結合簡單的組件程式碼例子,介紹MIP輪播圖中的重要屬性。

<mip-carousel
    autoplay
    defer="1000" 
    layout="responsive"
    width="600"
    height="400"
    indicator
    buttonController
    >
    <a target="_blank" href="http://www.php.cn">
        <mip-img src="你的图片地址" layout="responsive"  width="600" height="400"></mip-img>
        <div class="mip-carousle-subtitle">这里是标题</div>
    </a>
    <mip-img src="你的图片地址"></mip-img>
    <mip-img src="你的图片地址"></mip-img>
</mip-carousel>

上述元件程式碼,呈現的效果如下圖:

Mip輪播圖組件中的重要屬性講解

#這裡需要注意的重要屬性如下:

autoplay 屬性:用來規定輪播圖是否自動播放。如果沒有這個屬性,輪播圖只能手動點擊切換。

defer屬性:表示每次輪播的時間間隔,如果設定了autoplay,可以加入defer 來指定輪播的時間間隔

indicatorId屬性:下方指示器功能字段,和指示器的父節點的id 取值請保持一致,指示器的數量和輪播的item 個數必須保持一致,指示器這塊對id 是強依賴,樣式可以自行修改,範例中是官方預設樣式,指示器可點選定位。

widthheight屬性:分別表示與高度、寬度屬性配合來設定的圖片比例。不是實際寬高度。

indicator屬性:設定輪播圖上顯示的頁數,如上圖右下方的數字顯示。

layout設定值為responsive則是表示允許圖片自適應。

這篇文章就是關於MIP輪播圖元件中重要屬性的介紹,希望對需要的朋友有幫助!

以上是Mip輪播圖組件中的重要屬性講解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Atom編輯器mac版下載

Atom編輯器mac版下載

最受歡迎的的開源編輯器

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具