mui 圖片自動輪播
阿新 • • 發佈：2018-11-14
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> //自定義控制元件樣式，覆蓋原來的樣式，引入的檔案要寫在mui.min.css檔案之後 <link href="css/lunbo.css rel=stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init(); //mui.plusReady程式碼不執行， //1.沒有在手機行執行，而是在瀏覽器下執行頁面 //2.plusReady事件僅在webview首次建立時觸發 mui.plusReady(function() { //通過id選到元件複製給自定義物件 var rollSlider = mui("#slider"); //每個1s中，播放一張圖 rollSlider.slider({ interval: 1000 }); }); </script> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">輪播圖</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider" style="margin-top: 15px;"> <div class="mui-slider-group mui-slider-loop"> <!-- 額外增加的一個節點(迴圈輪播：第一個節點是最後一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="images/fengjing4.jpg"> <p class="mui-slider-title">我說所有的酒 都不如你</p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/fengjing1.jpg"> <p class="mui-slider-title">我在二環路的裡邊 想著你</p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/fengjing2.jpg"> <p class="mui-slider-title">你在遠方的山上 春風十里</p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/fengjing3.jpg"> <p class="mui-slider-title">今天的風吹向你 下了雨</p> </a> </div> <div class="mui-slider-item"> <a href="#"> <img src="images/fengjing4.jpg"> <p class="mui-slider-title">我說所有的酒 都不如你</p> </a> </div> <!-- 額外增加的一個節點(迴圈輪播：最後一個節點是第一張輪播) --> <div class="mui-slider-item mui-slider-item-duplicate"> <a href="#"> <img src="images/fengjing1.jpg"> <p class="mui-slider-title">我在二環路的裡邊 想著你</p> </a> </div> </div> <div class="mui-slider-indicator mui-text-right"> <div class="mui-indicator mui-active"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> <div class="mui-indicator"></div> </div> </div> </div> </body> <!-- //這樣也可以實現自動輪播 <script type="text/javascript" charset="utf-8"> mui.init(); //通過id選到元件複製給自定義物件 var rollSlider = mui("#slider"); //每個1s中，播放一張圖 rollSlider.slider({ interval: 1000 }); </script>--> </html>
