슬라이드 왼쪽 숨겨진 div, 슬라이드 오른쪽 활성 div

일련의 div가 있는데 첫 번째는 활성 상태입니다 (링크가있는 환영 화면 표시). 나머지는 숨겨진 div 절대 위치 왼쪽 : -100 % (링크도 포함됨)입니다.슬라이드 왼쪽 숨겨진 div, 슬라이드 오른쪽 활성 div

사용자가 링크를 클릭하면 현재 div가 왼쪽 (부드럽게)으로 슬라이드되고 새 콘텐츠가 오른쪽 (부드럽게)에서 슬라이드되도록해야합니다.

각 슬라이드를 다른 슬라이드로 이동할 수 있기 때문에 시차 슬라이드가 작동하지 않지만 사이트가 모든 슬라이드를 스크롤하여 대상 컨테이너에 도달하는 것을 원하지 않습니다. 요청한 콘텐츠에 도달하기 전에 하나의 스크롤 시퀀스 만 필요로합니다.

내가 본 것의 대부분은 떠 다니는 div로 작동하는 스크롤 스크립트 인 것 같습니다. 링크 3을 클릭하면 1,2,3을 슬라이드합니다. 나는 중간 물건을 놓칠 필요가있다! 나는 이것이 의미가 있기를 바란다!?

또한 가능한 경우 슬라이드의 내용을 동적으로로드하고 싶습니다. ?? 그러나 나는 그것으로 완전히 길을 잃었다! 여기

이 내가 필요한 거의이다 내가 지금까지있어 코드 ...

http://jsfiddle.net/ykbgT/5249/

,하지만 당신이 볼 수있는 모든 슬라이드는 같은에서 호출되고있다 시각! 모든 도움을 많이 받았다 !!!

html, body{ 
width:100%; 
height:100%; 
padding:0px; 
margin:0px; 
overflow: hidden; 
} 
.wrapper { 
position: absolute; 
margin: 0px; 
padding: 0px; 
width: 100%; 
height: 100%; 
overflow: hidden; 
} 
.slide{ 
position: absolute; 
width: 200%; 
height: 100%; 
font-size: 30px; 
text-align: center; 
border: 2px solid black; 
left: 100%; 
top:0px; 
} 
.navigation{ 
font-size:14px; 
} 
.navigation a{ 
display:block; 
background-color:#000; 
color:#fff; 
padding:5px; 
float:left; 
margin-right:5px; 
} 
#slide1{ 
background-color:#000; 
background-image:url(images/BG1.jpg); 
background-position:center top; 
background-repeat:no-repeat; 
width:100%; 
left: 0%; 
} 
.inner{ 
width:960px; 
height:800px; 
background-color:#fff; 
margin-left:auto; 
margin-right:auto; 
position:relative; 
} 
#slide2{ 
background-color:#090; 

} 
#slide3{ 
background-color:#F30; 
} 
.content{ 
width:30%; 
height:80%; 
float:right; 
background-color:#fff; 
margin:10%; 
} 

</style> 

</head> 

<body> 
<div class="wrapper"> 

<div class="slide" id="slide1"> 
<div class="inner"> 
    WELCOME CONTENT HERE 
</div> 
</div> 

<div class="slide" id="slide2"> 
<div class="content"> 
     <div>SLIDE 2 DYNAMIC CONTENT LOADS HERE</div> 
     <div class="navigation"> 
     <a class="button">LINK TO SLIDE 3</a> 
     <a class="button">LINK TO SLIDE 4</a> 
     <a class="button">LINK TO SLIDE 5</a> 
     <a class="button">LINK TO SLIDE 6</a> 
     <a class="button">LINK TO SLIDE 7</a> 
     <a class="button">LINK TO SLIDE 8</a> 
     </div> 
</div> 
</div> 

<div class="slide" id="slide3"> 
<div class="content"> 
     <div>SLIDE 3 DYNAMIC CONTENT LOADS HERE</div> 
     <div class="navigation"> 
     <a class="button">BACK TO SLIDE 2</a> 
     <a class="button">LINK TO SLIDE 4</a> 
     <a class="button">LINK TO SLIDE 5</a> 
     <a class="button">LINK TO SLIDE 6</a> 
     <a class="button">LINK TO SLIDE 7</a> 
     <a class="button">LINK TO SLIDE 8</a> 
     </div> 
</div> 
</div> 
</div>

출처

2013-03-22 user2195988

나는 내 솔루션을 업데이트하고 jsFiddle에 게시했습니다. 솔루션을 완료하지는 못했지만 버튼 2와 3이 작동합니다.

http://jsfiddle.net/Ns7sH/

$('.button2').click(function() { 
    var thisElement = $('#slide2')[0] 
    var previousElement = thisElement.previousElementSibling; 

    $(previousElement).animate({ 
      left: '-100%', 
     }, 1000); 

     $(thisElement).animate({ 
      left: '0%', 
     }, 1000);

});

콘텐츠를 jquery ajax로로드 할 필요가 없습니다. 나중에 시간이있을 때이를 넣을 것입니다.

출처

2013-03-22 12:37:27

안녕하세요, 귀하의 제안을 시도했지만 지금은 아무 일도 일어나지 않습니다. Jsfiddle에서 구현하면 큰 도움이 될 것입니다! 이것이 사소한 수정처럼 보인다면 나는 사과를 제외하고 초심자이다. 또한 새로운 슬라이드가로드 될 때마다 현재 표시되는 div를 슬라이드하여 제안합니까? 모든 도움에 다시 한 번 감사드립니다! – user2195988

좋아요, 제안에 작은 버그를 수정했다고 생각합니다 ... $ (this) .animate ({left : '-100 %'}, 1000); }})); false를 반환; }); 그러나 슬라이드 2가 작동하고있어, 왼쪽으로 밀어내는 것보다는 현재의 컨텐츠 위로 미끄러 져 들어가는 것 같습니까? – user2195988

또한 슬라이드 3에있는 경우 어떻게 슬라이드 2를 왼쪽에서 뒤로 슬라이드 할 수 있습니까? – user2195988

슬라이드 왼쪽 숨겨진 div, 슬라이드 오른쪽 활성 div

답변

관련 문제