我想在垂直位置特定时间自动移动滑块。这是我的滑块代码
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
}
或者是否有任何新闻Feed模板将在垂直位置移动? 感谢
答案 0 :(得分: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>