<!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> 