亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

章節
問答
課簽
筆記
評論
占位
占位

圖片輪播--聲明式觸輪播圖的播放(一)

觸發輪播圖的播放方法也有兩種,一種是聲明式,另外一種是JavaScript方式。首先來看聲明式方法。

聲明式方法是通過定義 data 屬性來實現,data 屬性可以很容易地控制輪播的位置。其主要包括以下幾種:

  • data-ride 屬性:取值 carousel,并且將其定義在 carousel 上。
  • data-target 屬性:取值 carousel 定義的 ID 名或者其他樣式識別符,如前面示例所示,取值為“#slidershow”,并且將其定義在輪播圖計數器的每個 li 上。
  • data-slide 屬性:取值包括 prev,next,prev表示向后滾動,next 表示向前滾動。該屬性值同樣定義在輪播圖控制器的 a 鏈接上,同時設置控制器 href 值為容器 carousel 的 ID 名或其他樣式識別符。
  • data-slide-to 屬性:用來傳遞某個幀的下標,比如 data-slide-to="2",可以直接跳轉到這個指定的幀(下標從0開始計),同樣定義在輪播圖計數器的每個 li 上。

基于上例,設置了自定義的 data 屬性之后如下:

<div id="slidershow" class="carousel" data-ride="carousel">
<!-- 設置圖片輪播的順序 -->
    <ol class="carousel-indicators">
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>
        <li data-target="#slidershow" data-slide-to="1"></li>
        <li data-target="#slidershow" data-slide-to="2"></li>
        <li data-target="#slidershow" data-slide-to="3"></li>
        <li data-target="#slidershow" data-slide-to="4"></li>
        <li data-target="#slidershow" data-slide-to="5"></li>
    </ol>
    <!-- 設置輪播圖片 -->
    <div class="carousel-inner">
    …
    </div>
    <!-- 設置輪播圖片控制器 -->
    <a class="left carousel-control" href="#slidershow" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="right carousel-control" href="#slidershow" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

在這里需要注意可以為 #slidershow 層添加 slide 樣式,使用圖片與圖片切換效果有平滑感。

<div id="slidershow" class="carousel slide" data-ride="carousel">
  ...
</div>

這樣頁面一加載就會有輪播效果了且單擊向前向后按鈕也可以切換圖片了:

任務

我來試試:使用聲明式方法觸發圖片輪播。

?不會了怎么辦
||

提問題

寫筆記

公開筆記
提交
||

請驗證,完成請求

由于請求次數過多,請先驗證,完成再次請求

加群二維碼

打開微信掃碼自動綁定

您還未綁定服務號

綁定后可得到

  • · 粉絲專屬優惠福利
  • · 大咖直播交流干貨
  • · 課程更新,問題答復提醒
  • · 賬號支付安全提醒

收藏課程后,能更快找到我哦~

使用 Ctrl+D 可將課程添加到書簽

邀請您關注公眾號
關注后,及時獲悉本課程動態

舉報

0/150
提交
取消
全部 精華 我要發布
全部 我要發布
最熱 最新
只看我的

手記推薦

更多

本次提問將花費2個積分

你的積分不足,無法發表

為什么扣積分?

本次提問將花費2個積分

繼續發表請點擊 "確定"

為什么扣積分?