我有 3 个 div 可以制作幻灯片。我想要的是能够点击一个 div 并让它循环两次。即,当单击 div #1 时,它会滚动到 div #2,继续,并停止在 div#3 .... 或单击 div #2 并使其平滑滚动两次并停止在 div #1
现在我只能让它滚动一次到下一个 div。
这里有 2 个 jsfiddle 示例,尽管我无法让它在 onclick 上滚动 2 个 div,但只有 1 个。
http://jsfiddle.net/jtbowden/ykbgT/2/ http://jsfiddle.net/jtbowden/ykbgT/
这是我的 HTML:
<div id="box1" class="box">Div #1</div>
<div id="box2" class="box">Div #2</div>
<div id="box3" class="box">Div #3</div>
</div>
和CSS
body {
padding: 0px;
}
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
height: 300px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box1 {
background-color: green;
left: -150%;
}
#box2 {
background-color: yellow;
}
#box3 {
background-color: red;
left: 150%;
}
和JS:
$('.box').click(function() {
$('.box').each(function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
} else if ($(this).offset().left > $('#container').width()) {
$(this).animate({
left: '50%',
}, 500 );
} else {
$(this).animate({
left: '-150%',
}, 500 );
}
});
});
最佳答案
http://jsfiddle.net/ykbgT/8195/
var anim = false; //prevent animaton before end, on more clicks
var numCycle = 2; //number of cycle, can be changed at will
$('.box').click(function () {
if (anim == false) animateD($(this), 1)
});
function animateD($d, count) {
anim = true;
$d.animate({
left: '-50%'
}, 500, function () {
$(this).css('left', '150%');
$(this).appendTo('#container');
});
$d2 = $d.next();
$d2.animate({
left: '50%'
}, 500, function () {
if (count < numCycle) {
count++;
animateD($d2, count)
} else {
count = 0;
anim = false;
}
});
}
关于JQuery 滑动 2 个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26960359/