对了,最后一个问题!
我正在创建一个水平投资组合网站,并正在寻找一些帮助,使用 scrollTo 插件创建下一个/上一个样式导航,供用户浏览图像。
我的 HTML 是:
<div id="contentRight">
<ul id="direction">
<li id="next"><a id="forward">Next</a></li>
<li id="prev"><a id="back">Previous</a></li>
</ul>
<table id="work">
<tr>
<td id="horseOneImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseTwoImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseThreeImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseFourImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseFiveImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseSixImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseSevenImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
<td id="horseEightImage" class="mainImage"><img class="large" src="media/images/horse.jpg" alt="" /></td>
</tr>
</table>
</div>
而我目前失败的 jQuery 是:
$('#forward').click(function() {
$('table#work tr').stop().scrollTo( '+=636', 800, {axis:'x'} );
});
$('#back').click(function() {
$('table#work tr').stop().scrollTo( '-=636', 800, {axis:'x'} );
});
不幸的是,当单击#forward 或#back 时,表格 tr 不会移动。
任何人有任何想法为什么?
有关额外信息 - 使用该表是因为这似乎是没有固定宽度的动态水平站点的最佳实践。