<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.7jQuery效果-自动轮播</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//1.定义变量并初始化
var now = 0 ;//当前对象的索引值
var timer = null ;//定义定时器
//2.定义展示函数
function display(now)
{
/*当前导航节点追加样式，同胞节点移除样式*/
$('#adv ol li').eq(now).addClass('active')
.siblings().removeClass('active');
/*显示当前图片节点，隐藏同胞节点*/
$('#adv ul li').eq(now).show()
.siblings().hide();
}
//end display()
//3.调用展示函数,进行测试
//display(4);
//4.确定边界值0与size-1，size是导航列表数
var size = $('#adv ol li').length;
//alert(size);
//5.定义播放函数
function play()
{
//关键是导航位置的变化，也就是now值得变化
if(now==size)
{
now = 0;/*到边界后，恢复初始值*/
}
else
{
now++;/*不是边界，则自增*/
}
//调用展示函数
display(now);
}
//end play()
//6.每隔2秒钟切换一次
timer = setInterval(play,2000);
});
</script>
<style>
*{ margin:0; padding:0;}/*清除边距*/
li{ list-style-type:none;}/*清除列表样式*/
#adv{
width:400px;
height:400px;
border:2px solid red;
overflow:hidden;/*溢出隐藏*/
position:relative;/*相对定位*/
cursor:pointer;/*设置鼠标样式*/
}
#adv ul{
width:400px;
height:400px;
position:absolute;/*绝对定位*/
top:0;/*上偏移量*/
left:0;/*左偏移量*/
}
#adv ul li{
width:400px;
heght:400px;
display:none;/*隐藏列表*/
}
#adv ul li img{
width:100%;
height:100%;
}
#adv ol{
position:absolute;
bottom:2%;
right:2%;
}
#adv ol li{
width:20px;
height:20px;
background-color:#CCC;
margin:2px;
font-size:14px;
text-align:center;/*水平居中*/
line-height:20px;/*垂直居中*/
color:#FFF;
font-weight:bolder;
float:left;
}
#adv ol li.active{ background-color:red;}
</style>
</head>
<body>
<!--广告轮播-->
<div id="adv">
<!--图片列表-->
<ul>
<li style="display:block">
<img src="img/b1.jpg">
</li>
<li><img src="img/b2.jpg"></li>
<li><img src="img/b3.jpg"></li>
<li><img src="img/b4.jpg"></li>
<li><img src="img/b5.jpg"></li>
</ul>
<!--导航列表-->
<ol>
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
