以下是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 關注
- 1547 瀏覽
添加回答
舉報
0/150
提交
取消