左右滑动隐藏的div，向右滑动活跃格

问题描述：

我有一系列的div，第一个是活动的（显示一个带有链接的欢迎屏幕）。其他人隐藏divs绝对位置左：-100％（这些也将包含链接）。左右滑动隐藏的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>

答

我已更新我的解决方案并将其发布到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加载内容，我会在稍后有空的时候加入它。

嗨，我想你的建议，但现在什么也没有发生。如果你能在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，向右滑动活跃格

相关推荐