我有下面的代码,它在点击图像时在 div 之间滑动。
问题是,我希望能够像这样滑动:红色 > 绿色 > 蓝色,但目前我只能在红色和绿色 div 之间滑动。
谁能给我一些指导吗?
谢谢!
/* These are the individual divs which are scrolled through */
#left {
min-width:100%;
min-height:300px;
background:red;
position:absolute;
top: 0;
left:0;
}
#right {
min-width:100%;
min-height:300px;
background:blue;
position:absolute;
top: 0;
right:-105%;
}
#middle {
min-width:100%;
min-height:300px;
background:green;
position:absolute;
top: 0;
right:-205%;
}
JS/JQuery:
<script>
$(document).ready(function() {
//Scroll all content to the left <---- this way
$('#scrollRight').click(function(e) {
$('.container').animate({'left': '-105%'});
});
//Scroll all content to the right ----> this way
$('#scrollLeft').click(function(e) {
$('.container').animate({'left': '0%'});
});
//End document ready function.
});
</script>
HTML:
<div class="container">
<!-- You have to add the last div first, so that each div will get added after that...basically so that the div you wich to see first, is in first position -->
<div id="right">right scroll</div>
<div id="middle">left scroll</div>
<div id="left">left scroll</div>
</div>
这是 fiddle :
最佳答案
所有三个 DIVS 同时进行动画处理,因此您只会看到两张幻灯片进行动画处理...在动画之间添加延迟。
关于jquery - .动画({'left' : '0%' }); not working when attached to 3 divs?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26106171/