동적 콘텐츠를 표시하는 자동 슬라이더/스크롤러

Question

내 웹 페이지에서 자동 슬라이더/스크롤러를 구현하는 방법을 알려줄 수 있습니까? 슬라이더에는 데이터베이스의 동적 데이터가 표시되어야합니다. (예 : plipl.com 사이트 홈 페이지 (www.plipl.com)의 핫 작업 탭. jQuery에서 쉽게 수행 할 수있는 방법이 있습니까?

Answer 1

다음은 특별한 것은 아니며 단지 빨리 시도해보십시오. 계속해서 전환하는 두 개의 div가 있습니다. 잘하면 시작을 알려주세요. 동일한 아이디어를 사용하고 AJAX를 통해 div에 콘텐츠를로드 할 수 있습니다.

코드 스 니펫 :

CSS :

div{width:100px;height:100px;} 
#container{overflow:hidden;border:1px solid black;} 
#left{background:red;float:left;} 
#right{background:green;float:right;} 

의 JScript :

$(function() { 
     //Call scrollContent function every 3secs 
    var timerUp = setInterval(scrollContent, 3000); 

    function scrollContent(){ 
     //Toggle top between 100 and 0 
     var top = $("#container").scrollTop() == 0 ? 100 : 0; 
     $("#container").scrollTop(top); 
    } 
}); 

태그 :

<div id="container"> 
     <div id="left"> 
      <ul> 
       <li>One</li> 
       <li>Two</li> 
       <li>Three</li> 
       <li>Four</li> 
      </ul> 
     </div> 
     <div id="right"> 
      <ul> 
       <li>Five</li> 
       <li>Six</li> 
       <li>Seven</li> 
       <li>Eight</li> 
      </ul> 
     </div> 
    </div> 

Answer 2

예. 이것은 쉽습니다 .데이터베이스에서 데이터 가져 오기 .Heljob 객체의 목록을 말하면 각 객체는 일부 String 필드를 포함하고 있습니다. 각 객체를 JSON 객체 (해시 임)로 변환합니다. 이러한 JSON 객체의 목록을 만듭니다. 웹 프레임 워크 X를 사용하여 JSON을 인쇄하십시오.

사용 jQuery의해서 getJSON는 JSON 객체를 잡아 각 HotJob을 반복하고 정보를 쓰기

이

구글 "JQuery와 JSON의 스크롤"및 상자 밖으로 JSON을 지원하는 무언가를 찾아이가 수행합니다...을http://www.logicbox.net/jquery/simplyscroll/flickr.html 확실한 이미지이지만 텍스트를 지원하도록 수정할 수 있습니다.

Answer 3

jCarousel은 동적 콘텐츠를 지원하는 jQuery 캐 러셀 플러그인입니다. 그의 웹 사이트에는 JSON 중심의 예제가 없지만 jQuery의 기본 AJAX 기능을 사용하여 구현하기는 쉽다.

이것은 jQuery에서 지금까지 발견 한 가장 강력하고 사용자 정의 가능한 회전식 슬라이드입니다.

Answer 4

또는 플러그 인을 사용하지 않으려면 jQuery의 AJAX 기능을 사용하여 데이터를로드하고 overflow : hidden과 함께 div를 만들고로드 된 데이터로 채우고 한 번에 한 섹션 만 표시하면됩니다.

그런 다음 setInterval() 함수를 사용하여 $ ("# container"). scrollTop (xx)을 변경하면 설정된 간격으로 다음 정보 집합을보기로 이동할 수 있습니다. 당신은 그것을 스크롤하거나 갑자기 팝업 할 수 있지만, 당신에게 달려 있지만 jQuery를 사용하면 꽤 쉽습니다.