scrollTo 및 가로 테이블

가로 스크롤 포트폴리오 사이트를 만들려고합니다. 사용자가 다음/이전 버튼을 사용하여 이미지를 클릭하고 마우스 및 스크롤 막대를 사용하여 평상시처럼 스크롤 할 수있게하려고합니다. 그러나 jquery를 사용하여 구현하는 데 문제가 있습니다.scrollTo 및 가로 테이블

가로형 웹 사이트에서는이 테이블을 사용하는 것이 가장 좋습니다. scrollTo() 플러그인을 사용하여 어떤 버튼이 클릭되었는지에 따라 테이블을 앞뒤로 스크롤 할 수 있습니다.

이 사이트의 코드를 NO 행운과 함께 사용하려고했지만 최종 제품은 this과 비슷합니다.

어떻게해야하나요?

 <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를 내가 시도 아무것도 추가하지해야 단지 엉망 다음과 같이

내 HTML입니다.

도움이 될 것입니다.

출처

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>

자바 스크립트

<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과 같은 몇 가지 것을 묻고 있습니까? 알려주세요. 가능하면 도와 드리겠습니다. Nice Day Dan을 만나보세요. –

정말! 위의 예제에서 '다음'을 클릭하면 기본적으로 이미 본 이미지가 숨겨지기 때문에 테이블 x 작업을 원하는 x 픽셀만큼 스크롤합니다. $ ('# forward')와 같은 것입니다. (function() { \t \t $ ('table # work tr') stop().scrollTo ('+ = 738', 800, {축 : 'x'}); \t}); – DanC

전혀 도움이 되나요?

jQuery.ScrollTo/jQuery.SerialScroll Horizontal Scrolling

그리고 테이블이 갈 수있는 방법이 될 것입니다 확실하지 않다 ...

출처

2010-07-13 18:44:49

전체 테이블은 버튼뿐만 아니라 스크롤 막대를 사용하여 스크롤 할 수 있어야합니다. 아, 그리고 테이블은 확실히 수평으로 앞으로가는 길입니다! – DanC

@DanC 꽤 대담한 성명서입니다. 수레는 어떨까요? 또는 플래시? 어쩌면 그냥 jQuery 마법과 함께 정렬되지 않은 목록이어야합니다. 프로그래밍 문제에 대한 대답은 하나도 없습니다. –

나는 하나의 대답을 말한 적이 없으며, 그 테이블이 최선의 방법입니다! 자세한 정보는 CSS-Tricks의 기사를 확인하십시오. - http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/ – DanC

scrollTo 및 가로 테이블

답변

관련 문제