<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<style?type="text/css">
body,div,p,ul,li,h1,h2,h3,img{
padding:0;
margin:?0;
}
ul,ol,li{
list-style:none;
}
img{border:0;float:left;}
body{
background:?#000?url(imges/a1.jpg)?no-repeat?top?center;
}
.bg-nav{
width:1000px;
height:?185px;
margin:?300px?auto?0;
background-color:?rgba(255,255,255,0.5);
padding:?5px?0;
position:?relative;
}
.bg-nav?.pic{
width:?944px;
height:?185px;
margin:?0?auto;
/*overflow:?hidden;*/
position:?relative;
}
.bg-nav?.pic?ul{
width:900px;
height:?185px;
margin:?0?20px;;
position:?absolute;
left:?0;
top:?0;
}
.bg-nav?.pic??ul?li{
width:?200px;
height:?175px;
float:?left;
border:?5px?#fff?solid;
margin:?0?6px?0;
}
.bg-nav?.btn{
position:?absolute;
left:?0;
top:?90px;
}
.bg-nav?.btn.left{
left:15px;
}
.bg-nav?.btn.right{
left:945px;
top:?0px;
}
</style>
<title></title>
</head>
<body>
<div?class="bg-nav">
???????????????<div?class="pic">
????????????????????<ul>
????????????????????<li><img?src="imges/b1.jpg"/></li>
????????????????????<li><img?src="imges/b2.jpg"/></li>
????????????????????<li><img?src="imges/b3.jpg"/></li>
????????????????????<li><img?src="imges/b4.jpg"/></li>
????????????????????<li><img?src="imges/b5.jpg"/></li>
????????????????????<li><img?src="imges/b6.jpg"/></li>
????????????????????<li><img?src="imges/b7.jpg"/></li>
????????????????????<li><img?src="imges/b8.jpg"/></li>
????????????????????</ul>
???????????????</div>
???????<div?class="btn?left"><img?src="imges/c1.png"</div>
???????<div?class="btn?right"><img?src="imges/c2.png"</div>
</div>
</body>
</html>
我想出來的效果是，這些圖片排成一行，可它變成了兩行？？？？？
<script?src="jquery.js"></script>?<script?type="text/javascript">?var?num=0?$('.bg-nav?.btn.left').click(function(){?num++;?if(num>1){num=1;}?$('.bg-nav?.pic?ul').animate({left:-910*num+'px'},1000);?})?$('.bg-nav?.btn.right').click(function(){?num=0;?$('.bg-nav?.pic?ul').animate({left:-910*num+'px'},1000);?})?</script>?然后我加了?jq，可是右邊的按鈕怎么會是，圖片來來回回的呢
1 回答
已采納
-
qq_小盛開_0好的好的 ，懂了 -
qq_小盛開_0<script src="jquery.js"></script> <script type="text/javascript"> var num=0 $('.bg-nav .btn.left').click(function(){ num++; if(num>1){num=1;} $('.bg-nav .pic ul').animate({left:-910*num+'px'},1000); }) $('.bg-nav .btn.right').click(function(){ num=0; $('.bg-nav .pic ul').animate({left:-910*num+'px'},1000); }) </script> 然后我加了 jq，可是右邊的按鈕怎么會是，圖片來來回回的呢
-
stone310<div class="btn left"><img src="imges/c1.png"></div>和<div class="btn right"><img src="imges/c2.png"></div>這兩句的<img>結(jié)束標簽沒寫，導(dǎo)致關(guān)系變?yōu)楦缸雨P(guān)系，就會出現(xiàn)事件冒泡，把結(jié)束符補上，就OK
點擊展開后面1條
- 1 回答
- 0 關(guān)注
- 1401 瀏覽
添加回答
舉報
0/150
提交
取消