jQery实例--写一个轮播图；
思路：
1.先写静态的，图片显示一个其余隐藏，小圆点对应数目，这两个都是ul li标签，用于后来在js中方便获取index索引值
2.写css
3.js:封装一个换图片函数changePic()，选取index的图片显示和小圆点变蓝，其余兄弟元素移除class样式。
点击事件：获取当前元素的index值，然后调用换图片函数changePic()。
静态HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="demo.css"/>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='demo.js'></script>
</head>
<body>
<div class="content">
<ul class="pic">
<li class="current"><a href="#"><img src="timg.jpg" alt=""></a></li>
<li><a href="#"><img src="timg (1).jpg" alt=""></a></li>
<li><a href="#"><img src="timg (2).jpg" alt=""></a></li>
<li><a href="#"><img src="timg (3).jpg" alt=""></a></li>
<li><a href="#"><img src="timg (4).jpg" alt=""></a></li>
</ul>
<ul class="circle"><!-- 小圆点 -->
<li class="first"></li>
<li ></li>
<li ></li>
<li ></li>
<li ></li>
</ul>
<!-- 左右箭头 -->
<img class='left' src="e608.png" alt=""/>
<img class='right' src="e629.png" alt=""/>
</div>
</body>
</html>js逻辑：
var index = 0;
$(function(){
setInterval(function(){//定时器，每4秒换一张图片
index++;
if(index==5){
index=0
};
changePic();
}, 4000);
//写一个换图片的函数 根据index值换图片（封装）
function changePic(){
$(".pic li").eq(index).addClass("current").siblings().removeClass("current");
$(".circle li").eq(index).addClass("first").siblings().removeClass("first");
};
//点击小圆点获取index值
$(".circle li").click(function() {
index = $(this).index();
console.log(index);
changePic();
});
$(".left").click(function() {
index--;
if(index==-1){
index=5
};
console.log(index);
changePic();
});
$(".right").click(function() {
index++;
if(index==5){
index=0
};
console.log(index);
changePic();
})
})