<!doctype html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width,inital-scale=1">
<title>18.3jQueryMoblie列表</title>
<script src="jquerymobile/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquerymobile/jquery.mobile-1.4.5.css">
<script src="jquerymobile/jquery.mobile-1.4.5.js"></script>
<script>
$(function(){
//1.定义变量
var timer = null; /*定时器*/
var index = 0; /*元素索引位置*/
var speed = 1000; /*时间间隔*/
var size = $('#lunbo ul li').length;/*元素个数*/
//2.定义展示函数
function display(index)
{
$('#lunbo ul li').eq(index).show()
.siblings().hide();
$('#lunbo ol li').eq(index).addClass('active')
.siblings().removeClass('active');
}//end display
//测试
//display(3);
//3.为导航列表元素注册单击事件
$('#lunbo ol li').click(navplay);
function navplay()
{
index = $(this).index();//获取当前元素索引位置
display(index);//调用展示函数
}//end navplay
//4.为右播放按钮注册单击事件
$('#right').click(rightplay);
function rightplay()
{
index = ++index%size;
display(index);//调用展示函数
}//end rightplay
//5.为左按钮注册单击事件
$('#left').click(leftplay);
function leftplay()
{
index = --index%size;
display(index);//调用展示函数
}//end leftplay
//6.编写自动播放方法
function autoplay()
{
timer = setInterval(rightplay,speed);
}//end autoplay
//调用自动播放
autoplay();
//7.编写停止播放方法
function stopplay()
{
clearInterval(timer);//清除定时器
}//end stopplay
//8.为lunbo的div注册hove事件
$('#lunbo').hover(stopplay,autoplay);
});
</script>
<style>
*{ margin:0;padding:0;}
li{ list-style:none;}
#lunbo{
position:relative;
width:100%;
height:300px;
margin:10px auto;
background-color:#CCC;
cursor:pointer;
overflow:hidden;
}
#lunbo ul{
width:100%;
height:100%;
}
#lunbo ul li{
width:100%;
height:100%;
display:none;
}
#lunbo ul li:first-child{
display:block;
}
#lunbo ul li img{
width:100%;
height:100%;
display:block;/*块元素*/
}
#lunbo ol{
position:absolute;
bottom:5%;
left:40%;
}
#lunbo ol li{
width:20px;
height:20px;
background-color:#666;
text-align:center;
line-height:20px;
border:solid 1px red;
float:left;
margin-right:2px;
color:#FFF;
}
#lunbo ol li.active{
background-color:#CCC;
color:#000;
}
#left,#right{
display:block;
width:20px;
height:20px;
background-color:#666;
text-align:center;
line-height:20px;
color:#FFF;
display:none;
}
#left:hover,#right:hover{
opacity:0.5;
}
#lunbo:hover #left{
display:block;
}
#lunbo:hover #right{
display:block;
}
#left{
position:absolute;
left:0;
top:50%;
margin-top:-10px;
}
#right{
position:absolute;
right:0;
top:50%;
margin-top:-10px;
}
</style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>列表操作</h1>
<a href="#page2">列表分割</a>
<a href="#page3">列表缩略图</a>
</div>
<div data-role="main" class="ui-content" >
<div id="lunbo">
<ul>
<li><img src="1.jpg"/></li>
<li><img src="2.jpg"/></li>
<li><img src="3.jpg"/></li>
<li><img src="4.jpg"/></li>
</ul>
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
<span id="left"><</span>
<span id="right">></span>
</div>
<h2>有序列表</h2>
<ol data-role="listview">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ol>
<h2>无序列表</h2>
<ul data-role="listview">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ul>
<h2>带有data-inset="true"属性的列表</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
<li><a href="#">列表项</a></li>
</ul>
</div>
<div data-role="footer">
<h1>页面底部</h1>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>列表分割</h1>
</div>
<div data-role="main" class="ui-content" >
<h2>List Dividers</h2>
<ul data-role="listview">
<li data-role="list-divider">吉林省</li>
<li><a href="#">长春</a></li>
<li><a href="#">四平</a></li>
<li><a href="#">松原</a></li>
<li data-role="list-divider">辽宁省</li>
<li><a href="#">沈阳</a></li>
<li><a href="#">大连</a></li>
<li><a href="#">锦州</a></li>
</ul>
</div>
<div data-role="footer">
<h1>页面底部</h1>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="header">
<h1>列表缩略图</h1>
</div>
<div data-role="main" class="ui-content" >
<h2>List Dividers</h2>
<ul data-role="listview">
<li data-role="list-divider">吉林省</li>
<li>
<a href="#"><img src="1.jpg"></a>
</li>
<li>
<a href="#">
<img src="5.png">
<h2>四平风景</h2>
<p>风景描述，风景位于，风和日丽，万里无云</p>
<span class="ui-li-aside">2018.12.4</span>
</a>
</li>
<li><a href="#">松原</a></li>
<li data-role="list-divider">辽宁省</li>
<li><a href="#">沈阳</a></li>
<li><a href="#">大连</a></li>
<li><a href="#">锦州</a></li>
</ul>
</div>
<div data-role="footer">
<h1>页面底部</h1>
</div>
</div>
</body>
</html>
列表分割
列表缩略图
