【发布时间】：2013-04-15 20:46:30
【问题描述】：
我似乎找不到 jQuery 理解元素当前位置的方法。我使用下面的 html 和 css、jQuery 滚动浏览一些标记（就像一个画廊 - 但我不想使用任何插件），但需要找到最后和第一个位置，因此它不会持续让某人滚动页面上的内容 - 目前我只是在应用操作时为父容器着色，但会实时将其换出，以不显示或灰显分页/滚动按钮。
滚动通过调整 209px 或 -209px 来工作，只是不了解第一个和最后一个元素（li）的位置。如果没有更多以前的 li，我试图停止上一个按钮的工作，反之亦然 - 就像我说现在只为父级着色以供视觉使用。 当它们动态吐出时，其中可能有任意数量的 li。 附上小提琴网址：http://jsfiddle.net/jambo/zLSUT/ 对于此演示中无法使用的图像，我们深表歉意。 所以回顾一下 - 需要在没有更多内容可查看的方向停止分页。 希望这是有道理的，提前谢谢你。
css
.smartH{
float: left; position: relative;
width:10000px; height: 80px; padding: 5px 0;
font-family: arial;
background: #fff;
}
.smartH a{
float: left;
text-decoration: none; cursor:pointer;
}
.smartH img{
float: left;
width: 100px; height: 80px;
border: none;
}
.smartH .title{
float: right;
margin: 0 5px; width:90px;
font-weight: bold; font-size: 13px; color: #000; line-height: 1.4; text-align: left;
}
.smartH .text{
float: right;
margin: 5px 5px 0; width:90px;
font-size: 12px; color: #000; line-height: 1.1; text-align: left;
}
.smartAd{
float:left;
width:627px; overflow: hidden;
}
.smartH li{
position:relative;
float:left; display: inline;
height:80px; width:200px; padding:0 4px 0 5px;
list-style-type: none;
}
.smartAd .paginate{
float:right
}
.smartAd i{
cursor:pointer;
}
jQuery
$( function () {
var posF = $(".smartH li.first").position();
var posL = $(".smartH li.last").position();
$("a#next").click( function () {
$(".smartH li").stop().animate({
left: "-=209px",
}, 500 );
if (posL.left == -627){
$(".smartH").css("background", "blue");
}
return false;
});
$("a#prev").click( function () {
$(".smartH li").stop().animate({
left: "+=209px",
}, 500 );
if (posF.left == 0){
$(".smartH").css("background", "green");
}
return false;
});
});
html
<div class="smartAd">
<ul class="smartH"><!-- posit abs? -->
<li class="first">
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/blinds.gif" alt="blinds" />
<p class="title">Call for a free quote today</p>
<p class="text">Best value blinds in Lincolnshire!</p>
</a>
</li>
<li>
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/coach.gif" alt="coach" />
<p class="title">Experience great days out</p>
<p class="text">Great value coach trips</p>
</a>
</li>
<li>
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/coffee.gif" alt="coffee" />
<p class="title">Need beans?</p>
<p class="text">We have a great variety of beans at great prices</p>
</a>
</li>
<li>
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/creditcard.gif" alt="credit card" />
<p class="title">Got bad credit?</p>
<p class="text">We can help you boost your rating</p>
</a>
</li>
<li>
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/mobility.gif" alt="mobility" />
<p class="title">Struggling to get around?</p>
<p class="text">Great value scooters!</p>
</a>
</li>
<li class="last">
<a href="http://www.google.com" target="_blank">
<img src="http://advertising.co.uk/wallpaper/plumber.gif" alt="plumber" />
<p class="title">Got a leak?</p>
<p class="text">Ring for reliable and friendly plumbers</p>
</a>
</li>
</ul><!-- // ul.smartH -->
<span class="paginate">
<a href="" class="icon" id="prev">Prev 1-</a>
<a href="" class="icon" id="next">- Next 1</a>
</span>
</div>
【问题讨论】：
标签： jquery scroll gallery image-gallery css-position