scrollTo 和水平表答案

【问题标题】：scrollTo and horizontal tablesscrollTo 和水平表
【发布时间】：2010-07-13 18:28:31
【问题描述】：

我正在尝试制作一个水平滚动的投资组合网站。我希望用户能够使用下一个/上一个按钮单击图像，以及像往常一样使用鼠标和滚动条滚动。但是，我在使用 jquery 实现这一点时遇到了麻烦。

使用该表格是因为这是横向网站的最佳做法。我希望使用 scrollTo() 插件来允许表格根据单击的按钮向前或向后滚动。

最终产品类似于this，尽管我曾尝试使用此站点上的代码，但没有运气！

我不知道该怎么做。

我的 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 可以添加，因为我尝试过的任何东西都是一团糟。

任何帮助都会很棒！

【问题讨论】：

这不是可以访问文件的情况，更多的是我无法让它工作！

标签： jquery jquery-plugins scrollto jquery-scrollable

【解决方案1】：

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>

这里是 Demo

【讨论】：

这很棒，而且效果很好，除了一件事 - 底部的滚动条增长得如此之多，以至于一旦你到达最后一个图像就不可能向后滚动查看第一个图像 - 唯一的方法是继续单击上一个按钮。反正只调整滚动条的位置也能达到同样的效果吗？
你的意思是，你需要一个手柄（控制器）来滑动你的图像吗，你是在问我这样的事情吗bit.ly/i0TUT？请让我知道，如果可能的话，我可以帮助你。有一个美好的一天，丹
不是真的！在上面的示例中，当您单击“下一步”时，它基本上会隐藏您已经看到的图像，我只是希望 table#work 沿其 x 轴滚动确定数量的像素。像 $('#forward').click(function() { $('table#work tr').stop().scrollTo( '+=738', 800, {axis:'x'} ); } );
感谢您的帮助，我只是走错了路！原来我不应该尝试滚动表格，它是窗口本身 - 工作 jQuery 是 - $('#forward').click(function() {$scrollTo('+=560px', 800, {axis :'x' });});$('#back').click(function() {$.scrollTo('-=560px', 800, { axis:'x' });});跨度>
感谢您的编辑，但我没有放弃 - 只是找到了一个替代解决方案！再次感谢老兄！

【解决方案2】：

这有帮助吗？

jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

而且我不确定桌子是否会是正确的选择......

【讨论】：

应该能够使用滚动条滚动整个表格，而不仅仅是使用按钮。哦，表格肯定是横向网站的前进方向！
@DanC 这是一个非常大胆的声明。花车呢？还是闪存？也许它应该只是一个带有一些 jQuery 魔法的无序列表。编程问题从来没有一个答案。
我从来没有说过一个答案，只是桌子是最好的选择！查看 CSS-Tricks 上的文章了解更多信息 - css-tricks.com/how-to-create-a-horizontally-scrolling-site