mui 輪播 圖代碼和js

<div class="mui-slider">
            <!-- 輪播圖的圖片容器 -->
            <!-- 如果要添加無縫輪播圖 輪播圖圖片容器要添加一個mui-slider-loop 類名 -->
                <div class="mui-slider-group mui-slider-loop">
                      <!-- 圖片要多放2個圖片 第一張是最後一張 最後一張是第一張 第一張和最後一張要添加mui-slider-item-duplicate 類名 -->
                    <!--支持循環,需要重複圖片節點-->
                    <div class="mui-slider-item mui-slider-item-duplicate">
                          <a href="#">
                              <img src="images/cbd.jpg" alt="">
                          </a>
                    </div>
                    <div class="mui-slider-item">
                          <a href="#">
                              <img src="images/muwu.jpg" alt="">
                          </a>
                    </div>
                      <div class="mui-slider-item">
                          <a href="#">
                              <img src="images/shuijiao.jpg" alt="">
                          </a>
                      </div>
<!--                       <div class="mui-slider-item">
                          <a href="#">
                              <img src="images/4.jpg" alt="">
                          </a>
                      </div>
                      <div class="mui-slider-item">
                          <a href="#">
                              <img src="images/5.jpg" alt="">
                          </a>
                      </div> -->
                      <div class="mui-slider-item">
                          <a href="#">
                              <img src="images/cbd.jpg" alt="">
                          </a>
                      </div>
                      <!--支持循環,需要重複圖片節點-->
                      <div class="mui-slider-item mui-slider-item-duplicate">
                          <a href="#">
                              <img src="images/muwu.jpg" alt="">
                          </a>
                      </div>
                </div>
                  <!-- 輪播圖的小圓點容器 -->
                <div class="mui-slider-indicator">
                      <div class="mui-indicator mui-active"></div>
                      <div class="mui-indicator"></div>
                      <div class="mui-indicator"></div>
                      <!-- <div class="mui-indicator"></div>
                      <div class="mui-indicator"></div> -->
                      
                     
                 </div>
            </div>

/**
             * 輪播圖js 直接放在js中
             */            
            
            //獲得slider插件對象
            var gallery = mui('.mui-slider');
            gallery.slider({
              interval:5000//自動輪播週期,若爲0則不自動播放,默認爲0;
            });

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章