设置旋转木马自动滑动
Set Carousel to slide automatically
我有一个简单的旋转木马。
我想让它自动滑动,而不是点击箭头。
演示:https://jsfiddle.net/vbcL9npo/
carousel = (function(){
// Read necessary elements from the DOM once
var box = document.querySelector('.carouselbox');
var next = box.querySelector('.next');
var prev = box.querySelector('.prev');
// Define the global counter, the items and the
// current item
var counter = 0;
var items = box.querySelectorAll('.content li');
var amount = items.length;
var current = items[0];
box.classList.add('active');
// navigate through the carousel
function navigate(direction) {
// hide the old current list item
current.classList.remove('current');
// calculate th new position
counter = counter + direction;
// if the previous one was chosen
// and the counter is less than 0
// make the counter the last element,
// thus looping the carousel
if (direction === -1 &&
counter < 0) {
counter = amount - 1;
}
// if the next button was clicked and there
// is no items element, set the counter
// to 0
if (direction === 1 &&
!items[counter]) {
counter = 0;
}
// set new current element
// and add CSS class
current = items[counter];
current.classList.add('current');
}
// add event handlers to buttons
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});
// show the first element
// (when direction is 0 counter doesn't change)
navigate(0);
})();
.carouselbox {
font-family: helvetica,sans-serif;
font-size: 14px;
width: 100px;
position: relative;
margin: 1em;
border: 1px solid #ccc;
box-shadow: 2px 2px 10px #ccc;
overflow: hidden;
}
.content {
margin: 0;
padding: 0;
}
.content li {
font-size: 100px;
margin: 0;
padding: 0;
width: 100%;
list-style: none;
text-align: center;
z-index: 2;
}
.active {
height: 130px;
}
.carouselbox button {
border: none;
visibility: hidden;
}
.active button {
visibility: visible;
}
.offscreen {
position: absolute;
left: -2000px;
}
.active .buttons {
padding: 5px 0;
background: #eee;
text-align: center;
z-index: 10;
position: relative;
}
.active li {
position: absolute;
top: 130px;
opacity: 0;
transform: scale(0);
transition: 1s;
}
.active li.current {
top: 30px;
opacity: 1;
transform: scale(1);
transition: 1s;
}
<div class="carouselbox">
<div class="buttons">
<button class="prev">
◀ <span class="offscreen">Previous</span>
</button>
<button class="next">
<span class="offscreen">Next</span> ▶
</button>
</div>
<ol class="content">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
您需要使用setInterval
。保存为一个变量,如果你想要自动停止,可以稍后清除它。
示例:https://jsfiddle.net/vbcL9npo/1/
var carousel = (function(){
// Read necessary elements from the DOM once
var box = document.querySelector('.carouselbox');
var next = box.querySelector('.next');
var prev = box.querySelector('.prev');
// Define the global counter, the items and the
// current item
var counter = 0;
var items = box.querySelectorAll('.content li');
var amount = items.length;
var current = items[0];
box.classList.add('active');
// navigate through the carousel
function navigate(direction) {
// hide the old current list item
current.classList.remove('current');
// calculate th new position
counter = counter + direction;
// if the previous one was chosen
// and the counter is less than 0
// make the counter the last element,
// thus looping the carousel
if (direction === -1 &&
counter < 0) {
counter = amount - 1;
}
// if the next button was clicked and there
// is no items element, set the counter
// to 0
if (direction === 1 &&
!items[counter]) {
counter = 0;
}
// set new current element
// and add CSS class
current = items[counter];
current.classList.add('current');
}
// add event handlers to buttons
next.addEventListener('click', function(ev) {
navigate(1);
});
prev.addEventListener('click', function(ev) {
navigate(-1);
});
// show the first element
// (when direction is 0 counter doesn't change)
navigate(0);
var interval = setInterval(function () { navigate(1) }, 1000);
})();
相关文章:
- 知道为什么我的旋转木马不会自动更改图片吗
- 禁用旋转木马中的下一个按钮和上一个按钮
- 旋转木马;启用内容安全策略时无法工作
- 在引导程序旋转木马中显示下一个图像
- 猫头鹰旋转木马2罐头't使渐变动画工作
- 猫头鹰旋转木马宽度计算错误
- 猫头鹰旋转木马动画未在Chrome中应用
- 猫头鹰旋转木马:无法读取属性'visibleItems'的未定义
- 在Javascript中设置多个小图像(如旋转木马)
- 如何使引导旋转木马保持图像纵横比
- 使用旋转木马在元素上切换类
- 将图像传递到Angular UI引导旋转木马
- 当ons惰性重复检测到更改时,如何使用ons旋转木马刷新列表
- 猫头鹰旋转木马2-拖动方向
- 在现有的垂直iScroll中设置旋转木马iScroll
- 将猫头鹰旋转木马放入不同设置的页面中
- 在角度引导旋转木马上设置活动幻灯片
- Onsen-ui:将旋转木马项目设置为0(带旋转木马列表的滑动菜单菜单)
- 设置旋转木马自动滑动
- 如何在旋转木马Bootstrap.js中设置子元素的动画