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

Я пытаюсь создать сайт с прокруткой по горизонтали. Я хочу, чтобы пользователи могли щелкнуть изображения с помощью следующей/предыдущей кнопки, а также прокрутки, как обычно, с помощью мыши и полос прокрутки. Однако у меня проблемы с использованием jQuery.scrollTo и горизонтальные таблицы

Таблица используется, как это лучше всего подходит для горизонтальных веб-сайтов. Я хочу использовать плагин scrollTo(), чтобы позволить таблице прокручиваться вперед или назад в зависимости от того, какая кнопка нажата.

Конечный продукт будет похож на this, хотя я попытался использовать код на этом сайте с NO удачи вообще!

Я теряюсь на том, как это сделать.

Мой 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, чтобы добавить все, что я попытался это просто бардак.

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

источник

2010-07-13 DanC

Это не случай доступа к файлу, это больше, что я просто не могу заставить его работать! – DanC

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

источник

2010-07-13 19:26:35

Это замечательно и отлично работает, кроме одного - свиток бар внизу растет настолько, что невозможно прокрутить назад, чтобы просмотреть первое изображение, как только вы дойдете до последнего - единственный способ сохранить нажатие предыдущей кнопки. В любом случае такой же эффект можно сделать, только регулируя положение полосы прокрутки? – DanC

Вы имеете в виду, вам нужна ручка (контроллер), чтобы скользить ваши изображения, вы спрашиваете меня о чем-то вроде этого http://bit.ly/i0TUT ?? Пожалуйста, дайте мне знать, если возможно, я могу вам помочь. Приятный день Дэн – 2010-07-14 10:26:07

Не совсем! В приведенном выше примере, когда вы нажимаете «next», он в основном скрывает изображения, которые вы уже видели, я просто хочу, чтобы таблица # выполняла прокрутку вдоль своей оси x для определенного количества пикселей. Что-то вроде $ ('# forward'). Click (function() { \t \t $ ('table # work tr'). Stop().scrollTo ('+ = 738', 800, {axis: 'x'}); \t}); – DanC

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

jQuery.ScrollTo/jQuery.SerialScroll Horizontal Scrolling

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

источник

2010-07-13 18:44:49

Весь стол должен быть прокручен с помощью полос прокрутки, а не только с помощью кнопок. Ох и столы - это точно путь вперед с горизонтальными сайтами! – DanC

@DanC это довольно смелое утверждение. А как насчет поплавков? или Flash? возможно, это должен быть неупорядоченный список с некоторой магией jQuery. Существует * никогда * один ответ на проблему программирования. –

Я никогда не говорил ОДНОГО ответа, просто эти столы - лучший способ пойти! Просмотрите статью в CSS-Tricks для получения дополнительной информации - http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ – DanC

ответ

Смежные вопросы