關於HBuilder簡單app的上下導航以及圖片迴圈播放>>

阿新 • • 發佈：2020-11-13

<header class="mui-bar mui-bar-nav public-bg-color">
<!--     關閉當前頁面                         mui圖示的通用屬性                    圖示的樣式                                   圖示的位置左或者右   -->
<a class="mui-action-back      mui-icon              mui-icon-left-nav          mui-pull-left"></a>
<a class="mui-action-back      mui-icon               mui-icon-settings        mui-pull-right"></a>
<h1 class="mui-title">歡迎來到恐怖高校</h1>
</header>
<!--底部導航-->
<!--
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首頁</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">好多人</span></span>
			<span class="mui-tab-label">訊息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">通訊錄</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">設定</span>
		</a>
	</nav>
-->	
<!--鍵入mtab回車  快速建立底部導航-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-qq"></span>
        <span class="mui-tab-label"></span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label"></span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-weixin"></span>
        <span class="mui-tab-label"></span>
    </a>
</nav>

<header class="mui-bar mui-bar-nav public-bg-color">
<!--     關閉當前頁面                         mui圖示的通用屬性                    圖示的樣式                                   圖示的位置左或者右   -->
<a class="mui-action-back      mui-icon              mui-icon-left-nav          mui-pull-left"></a>
<a class="mui-action-back      mui-icon               mui-icon-settings        mui-pull-right"></a>
<h1 class="mui-title">歡迎來到恐怖高校</h1>
</header>
<!--底部導航-->
<!--
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" href="#tabbar">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">首頁</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-chat">
			<span class="mui-icon mui-icon-email"><span class="mui-badge">好多人</span></span>
			<span class="mui-tab-label">訊息</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-contact">
			<span class="mui-icon mui-icon-contact"></span>
			<span class="mui-tab-label">通訊錄</span>
		</a>
		<a class="mui-tab-item" href="#tabbar-with-map">
			<span class="mui-icon mui-icon-gear"></span>
			<span class="mui-tab-label">設定</span>
		</a>
	</nav>
-->	
<!--鍵入mtab回車  快速建立底部導航-->
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-qq"></span>
        <span class="mui-tab-label"></span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label"></span>
    </a>
    <a class="mui-tab-item">
        <span class="mui-icon mui-icon-weixin"></span>
        <span class="mui-tab-label"></span>
    </a>
</nav>
<!--mbody 按下回車快速建立內容區域-->
<div class="mui-content punlic-padding public-margin-top">
	<!--搜尋框-->
		<div class="mui-content-padded" style="margin: 5px;">
			<!--<h5>這裡可以在搜尋框上面標註一行文字，太醜，棄之不用</h5>-->
			<div class="mui-input-row mui-search">
				<input type="search" class="mui-input-clear" placeholder="任務名單">
			</div>
<div class="mui-silder">
	<div class="mui-slider-group mui-slider-loop">
		<!--支援迴圈，需要重複圖片節點-->
		<!--
		<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="images/6ecc909140745928c97c44f7a6b3edb3.jpg"></a> 
	</div>
		<div class="mui-silder-item"><a href="#"><img src="images/84781574_p0.jpg"></a></div>
		<div class="mui-silder-item"><a href="#"><img src="images/84b4ba517927a29f043c95454283f64b.jpg"></a></div>
		<div class="mui-silder-item"><a href="#"><img src="images/8d3d840629855c154b315725fca76d3d.jpg"></a></div>
		<!--支援迴圈，需要重複圖片節點-->
	</div>
</div>			

<div id="slider" class="mui-slider" >
		<div class="mui-slider-group mui-slider-loop">
			<!-- 額外增加的一個節點(迴圈輪播：第一個節點是最後一張輪播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="../images/yuantiao.jpg">
				</a>
			</div>
			
			<!-- 第二張 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="images/84781574_p0.jpg">
				</a>
			</div>
			<!-- 第三張 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="images/84b4ba517927a29f043c95454283f64b.jpg">
				</a>
			</div>
			<!-- 第四張 -->
			<div class="mui-slider-item">
				<a href="#">
					<img src="images/8d3d840629855c154b315725fca76d3d.jpg">
				</a>
			</div>
			<!-- 額外增加的一個節點(迴圈輪播：最後一個節點是第一張輪播) -->
			<div class="mui-slider-item mui-slider-item-duplicate">
				<a href="#">
					<img src="images/shuijiao.jpg">
				</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>
	</div>






<script>
    mui.init();
    //獲得slider外掛物件
    var gallery = mui('.mui-slider');
    gallery.slider({
	interval:5000//自動輪播，若為0則不能自動播放，預設為0；
    });

    document.querySelector('.mui-slider').addEventListener('slide',function(event){
	  //注意sliderNumber是從零開始的
	alert("你正在看"+（event.detail.slide）+"張圖片")
});
</script>