scrollTo и горизонтальные таблицы - PullRequest
Новая
       60

scrollTo и горизонтальные таблицы

0 голосов
/ 13 июля 2010

Я пытаюсь создать сайт с горизонтальной прокруткой.Я хочу, чтобы пользователи могли нажимать на изображения с помощью кнопки «следующий / предыдущий», а также выполнять обычную прокрутку с помощью мыши и полос прокрутки.Однако у меня возникли проблемы с реализацией этого с помощью 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, чтобы добавить, потому что все, что я пробовал, просто беспорядок.

Любая помощь будет отличной!

Ответы [ 2 ]

1 голос
/ 13 июля 2010

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>

здесь Демо

0 голосов
/ 13 июля 2010

Помогает ли это вообще?

jQuery.ScrollTo / jQuery.SerialScroll Горизонтальная прокрутка

И я не уверен, что таблицы будут подходить...

...