mui轮播图+ 基于jquery

<!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>
mui轮播图+ 基于jquery

猜你喜欢
