mui輪播圖+ 基於jquery
阿新 • • 發佈：2018-12-22
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link href="css/mui.min.css" rel="stylesheet"/> </head> <style type="text/css"> .mui-content{ background: white; } .banner-img{ height: 230px; } </style> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">標題</h1> </header> <div class="mui-content"> <div id="slider" class="mui-slider"> //輪播圖容器 <div class="mui-slider-group mui-slider-loop"> </div> //原點 <div class="mui-slider-indicator mui-text-right"> </div> </div> </div> <script src="js/mui.min.js"></script> <script src="js/jquery-3.0.0.js"></script> <script src="js/mui.min.js" type="text/javascript"></script> <script src="js/getdatabyjsonp.js" type="text/javascript"></script> <script type="text/javascript"> mui.init({ swipeBack:true //啟用右滑關閉功能 }); //頂部輪播圖 getBanner(); function getBanner(){ $.ajax({ url: webUrl + "/index.php/Index/getBanner", type: "get", data: { "locationid": 1 }, dataType: "jsonp", success: function (d){ if(d.status==1){ if(d.info.length==1){ //輪播圖 $(".mui-slider-loop").html(`<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img class="banner-img" src="images/cardup.png"></a></div> <div class="mui-slider-item"><a href="#"><img class="banner-img" src="images/cardup.png"></a></div> <div class="mui-slider-item"><a href="#"><img class="banner-img" src="images/cardup.png"></a></div> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img class="banner-img" src="images/cardup.png"></a></div> `); //輪播圖原點 $(".mui-slider-indicator").html(`<div class="mui-indicator"></div>`); }else{ for(let i=0;i<d.info.length;i++){ if(i==0){ $(".mui-slider-loop").append(`<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img class="banner-img" src="${d.info[i].ads_pic}"></a></div> <div class="mui-slider-item"><a href="#"><img class="banner-img" src="${d.info[i].ads_pic}"></a></div>`) }else if(i==parseInt(d.info.length-1)){ $(".mui-slider-loop").append(`<div class="mui-slider-item"><a href="#"><img class="banner-img" src="${d.info[i].ads_pic}"></a></div> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img class="banner-img" src="${d.info[i].ads_pic}"></a></div>`) }else{ $(".mui-slider-loop").append(`<div class="mui-slider-item"><a href="#"><img class="banner-img" src="${d.info[i].ads_pic}"></a></div>`) } //圓點 $(".mui-slider-indicator").append(`<div class="mui-indicator"></div>`) } } } loopImg();//啟動輪播 } }); } function loopImg(){ let slider = mui("#slider"); slider.slider({ interval: 3000 }); } </script> </body> </html>