0

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

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

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

我不知道如何做到这一点。

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

任何帮助都会很棒！

4

2 回答 2

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>

这是演示

于 2010-07-13T19:26:35.177 回答
0

这有帮助吗？

jQuery.ScrollTo / jQuery.SerialScroll 水平滚动

而且我不确定桌子会不会是要走的路...

于 2010-07-13T18:44:49.930 回答