左右滑动隐藏的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和三个工作。
$('.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