Question

任何人都知道如何在div中使用overflow：hidden设置自动滚动（带循环）; ？

实施例

<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 - ＆gt;等待5秒 - ＆gt;平滑滚动到element_02 - ＆gt;等待5秒//并重复

Answer 1

此示例使用定位而不是滚动。滚动溢出隐藏元素有效，但可能有问题。

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>

Answer 2

您可以使用scrollTo jQuery插件：

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

并使用setTimeout(function(){ $.scrollTo('#element'); }, 5000);

重复一个函数

Answer 3

使用核心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>

溢出隐藏自动滚动

3 个答案: