<!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 回答
- 0 关注
- 1355 浏览
添加回答
举报
0/150
提交
取消