mui 轮播图+js上下张+js点击小白点

轮播内容由p标签代替,总的来说整体轮换轮播构架差不多都是前后各加首尾交替图.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<style>
			.p{
				display: inline-block;
				width:100%;
				height:18.0625rem;
				font-size: 3.125rem;
				text-align: center;
				line-height: 12.5625rem;
				color:white;
			  }	
			 .mui-slider-indicator .mui-indicator{
				 width:1.875rem;
				 height:1.875rem;
			 } 
		</style>
	</head>
	<body>
		<div id="slider" class="mui-slider" >
			<div class="mui-slider-group mui-slider-loop">
				<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<p class="p" style="background:red;">4</p>
				</div>
				<!-- 第一张 -->
				<div class="mui-slider-item">
					<p class="p" style="background: #0062CC;">1</p>
				</div>
				<!-- 第二张 -->
				<div class="mui-slider-item">
					<p class="p" style="background:gold;">2</p>
				</div>
				<!-- 第三张 -->
				<div class="mui-slider-item">
					<p class="p" style="background:firebrick;">3</p>
				</div>
				<!-- 第四张 -->
				<div class="mui-slider-item">
					<p class="p" style="background:red;">4</p>
				</div>
				<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
				<div class="mui-slider-item mui-slider-item-duplicate">
					<p class="p" style="background: #0062CC;">1</p>
				</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>
		<div align="center">
			<button class="btn mui-btn-block u" >上一个</button>
			<button class="btn mui-btn-block d">下一个</button>
		</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/jq.js"></script>
<script type="text/javascript" charset="utf-8">
	mui.init({
		swipeBack:true //启用右滑关闭功能
	});
	//获得slider插件对象
	var gallery = mui('.mui-slider');
		gallery.slider({
		  interval:5000//自动轮播周期,若为0则不自动播放,默认为0;
		});
	//左右滑动获取当前轮播位置索引
	document.querySelector('.mui-slider').addEventListener('slide', function(event) {
	  //注意slideNumber是从0开始的;
		var index = event.detail.slideNumber;//当前下标方法1
		console.info(gallery.slider().getSlideNumber());//当前下标方法2
	})
	mui('body').on('tap','.u',function(){
		gallery.slider().prevItem();//上一个
	})
	mui('body').on('tap','.d',function(){
		gallery.slider().nextItem();//下一个
	})
	//点击小圆点跳转
	mui('.mui-slider-indicator').on('tap','.mui-indicator',function(e){
		var index=this.index;
		gallery.slider().gotoItem(Number(this.getAttribute('index')))
		
	})
	//根据轮播数量遍历小圆点
    for(var i=0;i<mui('.mui-slider-loop .mui-slider-item').length-2;i++){
		$('.mui-slider-indicator').append('
'
); } </script> </html>

你可能感兴趣的:(mui)