左右滑動隱藏的div，向右滑動活躍格

我有一系列的div，第一個是活動的（顯示一個帶有鏈接的歡迎屏幕）。其他人隱藏divs絕對位置左：-100％（這些也將包含鏈接）。左右滑動隱藏的div，向右滑動活躍格

我需要這樣做，以便當用戶點擊一個鏈接時，當前div向左滑出（平滑），並且新內容從右側滑動（順利地）。

視差滑動對我來說不起作用，因爲您可以導航到另一個幻燈片，但我不希望該站點滾動瀏覽所有幻燈片以到達目標容器。我只想在達到請求的內容之前有一個滾動序列。

我所看到的大部分似乎都是滾動的浮動div的腳本，所以如果你點擊鏈接3你通過1,2,3滑動。我需要錯過中間的東西！我希望這是有道理的！？

此外，如果可能的話，我想的幻燈片將被動態加載的內容？但我完全失去了那一個！

這是到目前爲止，我已經得到了代碼...

這幾乎是我所需要的，但你可以看到所有的幻燈片正在以相同的叫時間！所有幫助都非常讚賞！

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和三個工作。

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 2013-03-22 12:58:17

好的，我想我修正了一個小錯誤建議... $（this）.animate（{left：'-100％'}，1000）; }}）;返回false; }）;我有幻燈片2工作，但它似乎滑過當前的內容，而不是推到左邊？ – user2195988 2013-03-22 13:19:03

也如果我在幻燈片3我怎麼能得到幻燈片2從左側滑回來？ – user2195988 2013-03-22 13:30:30

左右滑動隱藏的div，向右滑動活躍格

回答

相關問題