首頁(yè) 猿問(wèn) 輪播圖為什么實(shí)現(xiàn)不了

輪播圖為什么實(shí)現(xiàn)不了

Html/CSS JavaScript JQuery

慕哥6327088 2017-01-13 14:47:28

<!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夢(mèng)有大口袋_0

TA貢獻(xiàn)107條經(jīng)驗(yàn) 獲得超146個(gè)贊

<!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?style="background:red"></li>
<li?style="background:green"></li>
<li?style="background:blue"></li>
<li?style="background:#000"></li>
</ul>
<div?id="nav">
<!--?把a(bǔ)標(biāo)簽的href="#"改為"JavaScript:",因?yàn)?#"相當(dāng)于刷新頁(yè)面了,無(wú)法觸發(fā)單擊事件?-->
<a?href="JavaScript:"></a>
<a?href="JavaScript:"></a>
<a?href="JavaScript:"></a>
<a?href="JavaScript:"></a>
</div>
</div>
<script?type="text/javascript">
//如果你想更好的學(xué)會(huì)輪播，建議看這個(gè)課程http://yifanck.cn/learn/18
$(function(){
var?count=0;
$("a").click(function(){
//?$("#pic").css.left=-$(this).index()*500+'px';
//建議看JQuery的API文檔,不要想當(dāng)然應(yīng)該是這樣寫，看看JQuery是否有這個(gè)方法或者屬性
//建議分步驟測(cè)試,照你原來(lái)的代碼,連count都沒(méi)有獲取到
count=$(this).index();
console.log(count);
$("#pic").animate({"marginLeft":-count*500});
})
setInterval(focus,1000);
//索引還需要判斷，自己動(dòng)手操作，自己理解
function?focus(){
count++;
$("#pic").animate({"marginLeft":-count*500});
}
})
</script>
</body>
</html>

1 反對(duì) 回復(fù) 2017-01-14

1 回答
1 關(guān)注
1746 瀏覽

關(guān)注

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

輪播圖為什么實(shí)現(xiàn)不了

輪播圖為什么實(shí)現(xiàn)不了

1 回答

相關(guān)問(wèn)題推薦

添加回答

最近中文字幕高清中文字幕无,亚洲欧美高清一区二区三区,一本色道无码道dvd在线观看 ,一个人看的www免费高清中文字幕

熱搜

最近搜索清空

輪播圖為什么實(shí)現(xiàn)不了

輪播圖為什么實(shí)現(xiàn)不了

1 回答

相關(guān)問(wèn)題推薦

添加回答