<!DOCTYPE html><html><head> <title>focus</title> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <style type="text/css"> *{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; } </style></head><body><div id="pic_box"> <ul id="pic"> <li><img src="images/P_03.jpg"></li> <li><img src="images/P_09.jpg"></li> <li><img src="images/P_011.jpg"></li> <li><img src="images/P_016.jpg"></li> </ul> <div id="nav"> <a href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a> </div></div><script type="text/javascript"> $(function(){ var count=0; $("a").click(function(){ $("#pic").css.left=-$(this).index()*500+'px'; }); setInterval(focus,1000); function focus(){ count++; $("#pic").css.left=-count*500+'px'; } }); </script></body></html>
1 回答
已采纳
weibo_哆啦A梦有大口袋_0
TA贡献107条经验 获得超146个赞
<!DOCTYPE html>
<html>
<head>
<title>focus</title>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<style type="text/css">
*{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;
}
</style>
</head>
<body>
<div id="pic_box">
<ul id="pic">
<li style="background:red"></li>
<li style="background:green"></li>
<li style="background:blue"></li>
<li style="background:#000"></li>
</ul>
<div id="nav">
<!-- 把a标签的href="#"改为"JavaScript:",因为"#"相当于刷新页面了,无法触发单击事件 -->
<a href="JavaScript:"></a>
<a href="JavaScript:"></a>
<a href="JavaScript:"></a>
<a href="JavaScript:"></a>
</div>
</div>
<script type="text/javascript">
//如果你想更好的学会轮播，建议看这个课程http://www.imooc.com/learn/18
$(function(){
var count=0;
$("a").click(function(){
// $("#pic").css.left=-$(this).index()*500+'px';
//建议看JQuery的API文档,不要想当然应该是这样写，看看JQuery是否有这个方法或者属性
//建议分步骤测试,照你原来的代码,连count都没有获取到
count=$(this).index();
console.log(count);
$("#pic").animate({"marginLeft":-count*500});
})
setInterval(focus,1000);
//索引还需要判断，自己动手操作，自己理解
function focus(){
count++;
$("#pic").animate({"marginLeft":-count*500});
}
})
</script>
</body>
</html>添加回答
举报
0/150
提交
取消