溢出隐藏自动滚动

问题描述：

任何人都知道如何设置自动滚动（与循环）在div与溢出：隐藏; ？溢出隐藏自动滚动

例

<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;"> 
    <div class="element_01" style="width:500px; height:100px; float:left;"></div> 
    <div class="element_02" style="width:500px; height:100px; float:left;"></div> 
</div>

最终效果？

显示element_01 - >等待5秒 - >平滑滚动到element_02 - >等待5秒//重复

答

本示例使用定位而不是滚动。滚动溢出隐藏元素的作品，但可以是越野车。

http://codepen.io/anon/pen/tqgyA

$(document).ready(function() { 
 
    var numSlides = $('ul.scroller').children().length, 
 
     counter = 0; 
 
    windowHeight = $('.window').height(); 
 
    setInterval(function() { 
 
    counter++; 
 
    if (counter == numSlides) { 
 
     counter = 0; 
 
     $('.scroller').css('top', '0'); 
 
    } else { 
 
     var toMove = (counter * windowHeight); 
 
     $('.scroller').css('top', '-'+toMove.toString()+'px'); 
 
    } 
 
    }, 2000) 
 
});

html { font-family: Helvetica, Arial } 
 

 
.window { 
 
    width: 300px; 
 
    height: 200px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    border: 2px solid skyblue; 
 
} 
 

 
ul.scroller { 
 
    width: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    -webkit-transition: top .5s ease; 
 
    transition: top .5s ease; 
 
} 
 

 
ul.scroller li { 
 
    width: 100%; 
 
    height: 200px; 
 
    box-sizing: border-box; 
 
    padding: 80px 0; 
 
    text-align: center; 
 
    font-size: 28px; 
 
} 
 

 
ul.scroller li:nth-child(2n+2) { background: #F5F5F5 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="window"> 
 
    <ul class="scroller"> 
 
    <li> 
 
     First Item 
 
    </li> 
 
    <li> 
 
     Second Item 
 
    </li> 
 
    <li> 
 
     Third Item 
 
    </li> 
 
    <li> 
 
     Fourth Item 
 
    </li> 
 
    </ul> 
 
</div>

这就是我想要的！谢谢！ – user2599820 2014-09-30 20:40:02

答

您可以使用scrollTo jQuery插件：

http://demos.flesler.com/jquery/scrollTo/

和重复功能使用setTimeout(function(){ $.scrollTo('#element'); }, 5000);

答

随着核心JavaScript：

<div class="container" style="width:500px; max-width:500px; height:100px; max-height:100px; background:#F00; overflow:hidden;"> 
    <div class="element_01" style="width:500px; height:100px; float:left;">aaa</div> 
    <div class="element_02" style="width:500px; height:100px; float:left;">bbb</div> 
</div> 

<script> 
var container=document.getElementsByClassName('container')[0]; 
var start = 0; 
var smoothVal = 20; 
var waitVal = 5000; 
function smooth(){ 
    var interval=setInterval(function(){ 

      start++; 
      container.scrollTop = start; 
     if(start>100) { 
       clearInterval(interval); 
      wait(); 
     } 
     },smoothVal) 
} 

function wait(){ 
    start = 0; 
    container.scrollTop = start; 
     setTimeout(function(){ 


       smooth(); 

      },waitVal) 
} 
smooth(); 

</script>

溢出隐藏自动滚动

相关推荐