scrollTo和水平表 [英] scrollTo and horizontal tables
问题描述
我正在尝试制作一个水平滚动的投资组合网站.我希望用户能够使用下一个/上一个按钮单击图像，以及使用鼠标和滚动条像往常一样滚动.但是，我在使用jquery来实现此功能时遇到了麻烦.
I am attempting to make a horizontal scrolling portfolio site. I want to users to be able to click through the images using a next/previous button as well as scrolling as per usual with the mouse and scroll bars. I am, however, having trouble implementing this using jquery.
使用此表是因为这是水平网站中的最佳做法.我希望使用scrollTo()插件来允许表格根据单击哪个按钮来向前或向后滚动.
The table is used as this is best practice in horizontal websites. I wish to use the scrollTo() plugin to allow the table to scroll forwards or backwards depending on which button is clicked.
最终产品类似于此，尽管我尝试使用此站点上的代码完全不好运！
The end product would resemble this, although I have tried to utilise the code on this site with NO luck at all!
我不知道该怎么做.
我的HTML如下:
<div id="content">
<div id="contentRight">
<ul id="direction">
<li id="next"><a class="forward">Next</a></li>
<li id="prev"><a class="back">Previous</a></li>
</ul>
<table id="work">
<tr>
<td id="horseOneImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseTwoImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseThreeImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseFourImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseFiveImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseSixImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseSevenImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
<td id="horseEightImage" class="mainImage"><img src="media/images/horse.jpg" alt="" /></td>
</tr>
</table>
</div>
</div>
我目前没有要添加的jQuery，因为我尝试过的一切都只是一团糟.
I have no current jQuery to add as anything I have tried is just a mess.
任何帮助都会很棒！
推荐答案
HTML
<!DOCTYPE html>
<html>
<title>Slider !!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" ></script>
</head>
<body>
<div id="content">
<div id="contentRight">
<ul id="direction">
<li id="next"><a href="#" class="forward">Next</a></li>
<li id="prev"><a href="#" class="back">Previous</a></li>
</ul>
<center>
<table id="work">
<tr>
<td id="horseOneImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseTwoImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseThreeImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseFourImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseFiveImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseSixImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseSevenImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
<td id="horseEightImage" class="mainImage"><img src="http://blog.foreignpolicy.com/files/images/bird.jpg" alt="" /></td>
</tr>
</table>
</center>
</div>
</div>
</body>
</html>
javascript
<script type="text/javascript">
$(document).ready(function() {
var margin = 0;
var length = $('.mainImage').length;
var width = $('img:first').width();
var height = $('img:first').height();
$('table#work').width(width).height(height).css({overflow:'hidden'});
$('table#work tr').css({width:width*length,height:height,overflow:'hidden',position:'absolute'});
$('td.mainImage,td.mainImage img').css({width:width,height:height});
$('#next').click(function() {
margin +=width;
if(margin > width*(length-1)) { margin = width*(length-1); return;}
$('#wrap').stop().animate({left:"+="+width},1000);
$('html,body,table').stop().animate({scrollLeft:"+="+width},1000);
});
$('#prev').click(function() {
margin -=width;
if(margin<0) { margin = 0; return;}
$('#wrap').stop().animate({left:"-="+width},1000);
$('#prev,#next,html,body,table').stop().animate({scrollLeft:"-="+width},1000 );
});
});
</script>
这是 演示
here's the Demo
这篇关于scrollTo和水平表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
