Question

我正在尝试制作一个水平滚动投资组合网站。我希望用户能够使用下一个/上一个按钮单击图像，以及使用鼠标和滚动条按常规滚动。但是，我在使用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，因为我尝试的只是一团糟。

任何帮助都会很棒！

Answer 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

Answer 2

这有帮助吗？

jQuery.ScrollTo / jQuery.SerialScroll Horizontal Scrolling

而且我不确定桌子是否可行......

scrollTo和水平表

2 个答案: