以下是html<div class="pg3middle">
<ul class="submit"">
<li>
<img src="images/01.jpg" alt="">
<a href="">XXXXXXX</a>
</li>
<li>
<img src="images/02.jpg" alt="">
<a href="">XXXXXXXX</a>
</li>
<li>
<img src="images/03.jpg" alt="">
<a href="">XXXXXXXX</a>
</li>
</ul>
<div class="packg">
<div class="next" href="javascript:()"></div>
<div class="prev" href="javascript:()"></div>
</div>
</div>CSS是下面.pg3middle {
position: absolute;
left: 50%;
margin-left: -160px;
width: 320px;
overflow: hidden;
}
.submit{
width: 960px;
height: 420px;
position: relative;
left: -320px;
}
.pg3middle .submit li{
display: block;
width: 320px;
height: 420px;
float: left;
}
.submit li img{
display: block;
width: 320px;
height: 420px;
float: left;
}
.pg3middle ul li a{
display: block;
width: 300px;
height:20px;
position: absolute;
bottom: 0;
background:rgba(0,0,0,0.3);
padding: 10px;
overflow: hidden;
line-height: 20px;
font-size: 14px;
color: #fff;
}
.next{
width: 44px;
height: 53px;
position: absolute;
background: url(../images/focus_btn.png) no-repeat -35px -10px;
right: -44px;
top: 50%;
margin-top: -44px;
}
.next:hover{
background: url(../images/focus_btn.png) no-repeat -35px -84px;
}
.prev{
width: 44px;
height: 53px;
position: absolute;
background: url(../images/focus_btn.png) no-repeat 0px -10px;
left: -44px;
top: 50%;
margin-top: -44px;
}
.prev:hover{
background: url(../images/focus_btn.png) no-repeat 0px -84px;
}做出来就是一个方框，后面3张图，是一个ul+li 的方式，我现在实现了点击prev标签，可以让轮播区（submit）的left值到正确位置，但是next标签就不行。想问问是哪里有问题。下面是JS代码$(function(){
var next = $(".packg .next");
var prev = $(".packg .prev");
var pg3middle = $(".pg3middle");
var sub = $(".submit");
pg3middle.hover(function(){next.stop().animate({right:'0'},500)},
function(){next.stop().animate({right:'-44px'},500)})
pg3middle.hover(function(){prev.stop().animate({left:'0'},500)},
function(){prev.stop().animate({left:'-44px'},500)})
prev.click(function(){
sub.animate({left:'+=320px'},500)
if (sub.css('left') >= '0') {
sub.stop().animate({left:'-640px'});
}
})
next.click(function(){
sub.animate({left:'-=320px'},500)
if (sub.css('left') == '-640px') {
sub.stop().animate({left:'0'});
}
})
})类名命名有点抠脚= =谢谢大神指导~
1 回答
- 1 回答
- 1 关注
- 1514 浏览
添加回答
举报
0/150
提交
取消