<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>16.12jQuery事件举例-轮播</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
var now = 0;//初始化编号
var timer=null;//定义定时器
//定义广告展示函数display()
function display(){
$('#adv ol li').eq(now).addClass('active')
.siblings().removeClass('active');
$('#adv ul li').eq(now).show()
.siblings().hide();
}//end
//display(now);//调用展示函数
//定义自动播放函数autoPlay()
function autoPlay(){
//实现循环操作
//实现导航编号的变化
if(now==$('#adv ol li').length-1) {now=0;}
else {now++;}
//调用展示函数
display();
}//end autoPlay()
//每一秒钟切换一次
timer = setInterval(autoPlay,3000);
//鼠标移入大图片停止播放，鼠标移出图片继续播放
$('#adv').mouseenter(function(){clearInterval(timer);})
.mouseleave(function(){timer = setInterval(autoPlay,3000);});
//鼠标移入导航发生的效果
$('#adv ol li').mouseenter(function(){
clearInterval(timer);
now = $(this).index();
display();
});
});
</script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style-type:none;
}
#adv{
width:400px;
height:400px;
border:solid 2px red;
overflow:hidden;
cursor:pointer;
position:relative;/*相对定位*/
}
#adv ul{
position:absolute;/*绝对定位*/
top:0px;
left:0px;
width:400px;
height:400px;
}
#adv ul li{
width:400px;
height:400px;
display:none;
}
#adv ul li.show{
display:block;
}
#adv ul li img{
width:400px;
height:400px;
}
#adv ol{
position:absolute;
left:50px;
bottom:10px;
}
#adv ol li{
width:20px;
height:20px;
background-color:#CCC;
float:left;
text-align:center;/*水平居中*/
line-height:20px;/*垂直居中*/
margin:2px;
font-size:14px;
font-weight:bolder;
color:#FFF;
}
#adv ol li.active{
background-color:#F30;
}
</style>
</head>
<body>
<!--轮播结构-->
<div id="adv">
<!--图片列表-->
<ul>
<li class="show"><img src="../jQuery6/img/b1.jpg"></li>
<li><img src="../jQuery6/img/b2.jpg"></li>
<li><img src="../jQuery6/img/b3.jpg"></li>
<li><img src="../jQuery6/img/b4.jpg"></li>
<li><img src="../jQuery6/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>
