轮播内容由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('<div class="mui-indicator" index='+i+'></div>');
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
