轮播图为什么实现不了
<!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>
慕哥63270881回答
-
weibo_哆啦A梦有大口袋_0
<!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>
随时随地看视频慕课网APP
Html/CSS
JavaScript
JQuery