0
我似乎无法找到理解元素当前位置的方法。我使用下面的html和css，jQuery来滚动浏览一些标记（像一个画廊 - 但我不想使用任何插件），但需要找到最后和第一个位置，这样它不会连续让别人从页面滚动内容 - 目前我只是在应用某个动作时对父容器着色，但会在现场将其替换为不显示或变灰的分页/滚动按钮。查找元素的位置，然后在jQuery中使用.position（）不起作用
通过调整209px或-209px的滚动工作只是不理解第一个和最后一个元素（li's）的位置。我试图停止以前的按钮工作，如果没有更多的以前的李，反之亦然 - 就像我说的只是为现在的父母着色视觉。 可能有任何数量的李在这个，因为他们动态吐出来。 附加的小提琴网址也是：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>
对不起，在小提琴上给出了一个较老的版本，这个版本包括李的类。 – 2013-04-09 14:29:41
已解决：在工作副本中添加了jsLint链接 - 如果没有更多可用内容，则禁用上一页/下一页按钮 - 适用于IE，Webkit和Geko的所有版本.http：//jsfiddle.net/jambo/eU3jk/13/ – 2013-04-12 13:31:00
您应该发布那么你自己的帖子的答案，以防万一未来有同样的问题。张贴对自己的问题的答案没有错，我已经在过去做过。 – Lowkase 2013-04-12 13:51:07