自学了一些jQuery,虽然还是菜鸡，但是想留点小痕迹~
（1） 功能：
jQuery实现轮播功能，当点击“>””<”或下面的“蓝色圆点”时可以自动查看图片，此时自动播放功能暂停，待不点击时可以恢复自动播放功能。
代码展示：
1. 引入<scriptsrc="http://www.imooc.com/data/jquery-1.8.2.min.js"></script>
2. Css部分：
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 700px;
height: 400px;
border: 1px solid#102327;
position: relative;
margin:0 auto;
margin-top: 100px;
overflow: hidden;
}
.ul_list{
width:3500px;
height: 400px;
position: absolute;
}
.li_list{
width: 700px;
height: 400px;
list-style: none;
float: left;
}
.li_list img{
width: 100%;
height: 100%;
}
.odiv_nav{
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -100px;
}
.span_list{
width: 20px;
height: 20px;
border: 3px solidwhite;
border-radius:50%;/*圆形*/
float: left;
margin-left: 20px;
cursor: pointer;/*可有可无*/
}
.left_click{
position: absolute;
width: 80px;
height: 400px;
font-size:4em;
color: blue;
text-align: center;
line-height: 400px;
cursor: pointer;
z-10000;
}
.right_click{
position: absolute;
right: 0px;
width: 80px;
height: 400px;
font-size:4em;
color: blue;
text-align: center;
line-height: 400px;
cursor: pointer;
z-10000;
}
</style>
3. body部分：
<body>
<div id="box">
<ulclass="ul_list">
<liclass="li_list"><img src="1.jpg"alt=""/></li>
<liclass="li_list"><img src=" 2.jpg"alt=""/></li>
<liclass="li_list"><img src="3.jpg"alt=""/></li>
<liclass="li_list"><img src="4.jpg"alt=""/></li>
<liclass="li_list"><img src="5.jpg"alt=""/></li>
</ul>
<divclass="odiv_nav">
<spanclass="span_list"></span>
<spanclass="span_list"></span>
<spanclass="span_list"></span>
<spanclass="span_list"></span>
</div>
<divclass="left_click"><</div>
<divclass="right_click">></div>
</div>
4. 最重要的部分，具体实现细节：
<script>
$(function(){
var num=0;
var timer=null;
go();
$("#box").mouseenter(function(){//实现当鼠标移动到box上时，不执行自动轮播功能
clearInterval(timer);//移动进去时清除定时器
}).mouseleave(function(){
go();//移出后执行go函数
});
$(".span_list").eq(0).css("backgroundColor","blue");
//页面加载后默认是第一张图，则让第一个导航圆点变为“选中色”。
function go(){
timer=setInterval(function(){//设置定时器
num++;//用一个全局变量来控制图的运动次数
if(num>4){//如果移动到了最后一张图，则num赋值1，调整ul边距（相当于初始化）
num=1;
$(".ul_list").css("margin-left","0px");
}
if(num==4){//由于圆点只有四个，而图片有五张，当移动到第五张图片时，给第一个圆点“选中色”。
$(".span_list").css("backgroundColor","transparent");//transparent为透明色
$(".span_list").eq(0).css("backgroundColor","blue");
}
else{//图片运动一次，导航圆点也动态的变换，这里先让所有圆点变为“不选中色”，再让当前圆点变为“选中色”。
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(num).css("backgroundColor","blue");
}
$(".ul_list").animate({"marginLeft":-700*num+"px"},580);//使用animate实行运动功能，这个580可有可无
},2000); //2秒轮动一下
}
$(".span_list").each(function (index) {//遍历每一个圆点添加点击事件，点击当前圆点则让num值赋为当前圆点的索引
$(this).click(function () {
num=index;
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(num).css("backgroundColor","white");
$(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580);//580代表速度，点击圆点后，结束自动播放
})
});
$(".right_click").click(function(){
//右按钮点击事件，每点击一次num++,这里有很多的判断，是用来消除一些BUG的。
if(num<=4){num++;}
if(num>4){
num=1;
$(".ul_list").css("margin-left","0px");
}
if(num==4){
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(0).css("backgroundColor","blue");
}
else{
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(num).css("backgroundColor","blue");
}
$(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580);//580代表速度，点击"><"后，结束自动播放
});
$(".left_click").click(function(){//左按钮点击事件
if(num>=0){num--;}
if(num<0){
num=3;
$(".ul_list").css("margin-left","-2800px")
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(3).css("backgroundColor","blue");
}
else{
$(".span_list").css("backgroundColor","transparent");
$(".span_list").eq(num).css("backgroundColor","blue");
}
$(".ul_list").stop().animate({"marginLeft":-700*num+"px"},580);
});
});
</script>
2)在原来基础上实现，轮转到该位置时，上面显示该放大图片，这时又该怎么做？？？
具体操作：
1）.把所有 $(".span_list").eq(0).css("backgroundColor","blue");把所有 $(".span_list").eq(num).css("backgroundColor","blue");改为
$(".span_list").eq(0).css("border-color","red");$(".span_list").eq(nuj).css("border-color","red");
2）.把左右的 $(".span_list").css("backgroundColor","transparent");改为
$(".span_list").css("border-color","white");
3）.css中.span_list去掉border-radius:50%;
4）已成功实现^-^！！！
感想：发现jQuery的一些功能还是很酷炫的，而且代码简洁，特别是一些插件功能！！！