在jquery中重叠幻灯片，div重叠

这里的第一个块是每隔5秒自动滑动div

$(document).ready(function(){ var refreshId = setInterval( function() { $('.box').each(function() { if ($(this).offset().left  $('#container').width()) { $(this).animate({ left: '50%' }, 500 ); } else { $(this).animate({ left: '-150%' }, 500 ); } }); },5000); //the second block is to move the div's to left on clicking the leftbutton $(".leftbutton").click(function(){ $('.box').each(function() { if ($(this).offset().left  $('#container').width()) { $(this).animate({ left: '50%' }, 500 ); } else { $(this).animate({ left: '-150%' }, 500 ); } }); }); the third block is to move the div's to right side on click of right button $(".rightbutton").click(function(){ $('.box').each(function() { if ($(this).offset().left  $('#container').width()) { $(this).css({ 'left': '-150%' } ); } else { $(this).animate({ left: '150%' }, 500 ); } }); }); }); //the below is the HTML 
 
Div #1
 
Div #2
 
Div #3
 
 // the below is the 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%; } 

所以基本上经过几次试验和错误后，div 1,2和3重叠，只有一个div是可见的。 我想在遇到问题之前你必须尝试几次代码。

Answer 1

 $(document).ready(function(){ var refreshId; var restartAnimation = function() { clearInterval(refreshId); refreshId = setInterval( 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 ); } }); },1000); } restartAnimation() $(".leftbutton").click(function(){ restartAnimation(); $('.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 ); } }); }); $(".rightbutton").click(function(){ restartAnimation(); $('.box').each(function() { if ($(this).offset().left < 0) { $(this).animate({ left: '50%' }, 500 ); } else if ($(this).offset().left > $('#container').width()) { $(this).css({ 'left': '-150%' } ); } else { $(this).animate({ left: '150%' }, 500 ); } }); }); }); 

//上面的javascript完全解决了问题，现在通过调用重置自动动画的function，可以避免同时出现手动和自动动画。 这不会让div重叠。 这不是我提出的。 我得到了别人的帮助。 但我仍然希望与可能遇到类似问题的人分享答案。