我有一个简单的旋转木马。
我想让它自动滑动,而不必点击箭头。
演示: 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);
})();
&#13;
.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;
}
&#13;
<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>
&#13;
答案 0 :(得分:3)
您需要使用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);
})();