javascript - 如何设置 slider 自动移动？

Question

我想在特定时间在垂直位置自动移动 slider 。这是我的 slider 代码

HTML代码

<script>
    $.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx=carousel data-cycle-timeout=0 data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible=2 data-cycle-carousel-vertical=true>
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
    <img src="http://malsup.github.io/images/beach5.jpg">
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="center">
    <button id="prev3">∧ Prev</button>
    <button id="next3">∨ Next</button>
</div>

CSS 代码

.slideshow {
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 312px!important;
}
.slideshow img {
    width: 100px;
    height: 100px;
    padding: 2px;
}
div.responsive img {
    width: auto;
    height: auto
}
.cycle-pager {
    position: static;
    margin-top: 5px
}  
div.vertical {
    width: 100px
}

jsiddle

或者是否有任何新闻提要模板会在垂直位置移动？。谢谢

Answer 1

使用现有代码，您可以使用 setInterval() 并在“下一步”按钮上触发点击事件。

var paused = false,
    interval = setInterval(function() {
      (!paused) && $('#next3').trigger('click');
    },3000);
$('.slideshow, .controls').hover(function() {
  paused = true;
},function() {
  paused = false;
});

.slideshow {
    margin: auto;
    position: relative;
    overflow: hidden;
    height: 312px!important;
}
.slideshow img {
    width: 100px;
    height: 100px;
    padding: 2px;
}
div.responsive img {
    width: auto;
    height: auto
}
.cycle-pager {
    position: static;
    margin-top: 5px
}
div.vertical {
    width: 100px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.js"></script>
<script src="http://malsup.github.io/jquery.cycle2.carousel.js"></script>
<script>
$.fn.cycle.defaults.autoSelector = '.slideshow';
</script>
<div class="slideshow vertical" data-cycle-fx="carousel" data-cycle-timeout="0" data-cycle-next="#next3" data-cycle-prev="#prev3" data-cycle-carousel-visible="2" data-cycle-carousel-vertical="true">
    <img src="http://malsup.github.io/images/beach1.jpg">
    <img src="http://malsup.github.io/images/beach2.jpg">
    <img src="http://malsup.github.io/images/beach3.jpg">
    <img src="http://malsup.github.io/images/beach4.jpg">
    <img src="http://malsup.github.io/images/beach5.jpg">
    <img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class="controls center">
    <button id="prev3">∧ Prev</button>
    <button id="next3">∨ Next</button>
</div>