html>
focus*{padding:0;margin: 0;}
li{list-style: none;}
#pic_box{
width: 500px;
height: 300px;
position: relative;
margin: 100px;
overflow: hidden;
}
#pic{
width: 2000px;
height: 300px;
position: absolute;
left:0;
top: 0;
}
#pic li{
width: 500px;
height: 300px;
float: left;
}
#pic li img{
width: 500px;
height: 300px;
}
#nav{
position: absolute;
left: 50%;
margin-left: -90px;
bottom: 40px;
}
#nav a{
float: left;
width: 20px;
height: 10px;
margin-left: 20px;
background: #ccc;
}
//如果你想更好的学会轮播,建议看这个课程http://www.imooc.com/learn/18
$(function(){
var count=0;
$("a").click(function(){
// $("#pic").css.left=-$(this).index()*500+'px';
//建议看JQuery的API文档,不要想当然应该是这样写,看看JQuery是否有这个方法或者属性
//http://www.codesocang.com/jq/jquery1.7.2.html
//建议分步骤测试,照你原来的代码,连count都没有获取到
count=$(this).index();
console.log(count);
$("#pic").animate({"marginLeft":-count*500});
})
setInterval(focus,1000);
//索引还需要判断,自己动手操作,自己理解
function focus(){
count++;
$("#pic").animate({"marginLeft":-count*500});
}
})