<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>15.6jQuery效果-手动轮播</title>
<script src="../js/jquery-3.1.1.min.js"></script>
<script>
$(function(){
//为导航列表添加事件
$('#adv ol li').click(function(){
//当前对象追加样式，同胞节点移除样式
$(this).addClass('active')
.siblings().removeClass('active');
//$(this).index():当前对象位置
var now = $(this).index();
//显示对应图片
$('#adv ul li').eq(now).show()
.siblings().hide();
});
});
</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;
height: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>
效果图
