页面导航源码

HTML：

<div id="slideshow" data-num="0">
    <div>Thing one</div>
    <div>Thing two</div>
    <div>Thing three</div>
    <div>Thing four</div>
</div>
<span id="back">Back</span> <span id="next" οnclick="next()">Next</span>

CSS

#slideshow {
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
}
#slideshow > div {
    width: 100%;
    display: inline-block;
    font-size: 1rem;
    white-space: normal;
    vertical-align: top;
    position: relative;
    transition: left 1s;
}
#next { float: right }

Javascript

function callback(num) {
    console.log('Ok, here\'s you\'re num. Do something: ' + num);
};
document.getElementById('next').onclick = function() {
    var e = document.getElementById('slideshow');
    e.dataset.num = (parseInt(e.dataset.num) + e.children.length + 1) % (e.children.length);
    callback(e.dataset.num);
    for (var i = 0; i < e.children.length; i++)  e.children[i].style.left = ((parseInt(e.dataset.num) + e.children.length) % (e.children.length)) * -100 + '%';
};
document.getElementById('back').onclick = function() {
    var e = document.getElementById('slideshow');
    e.dataset.num = (parseInt(e.dataset.num) + e.children.length - 1) % (e.children.length);
    callback(e.dataset.num);
    for (var i = 0; i < e.children.length; i++)  e.children[i].style.left = ((parseInt(e.dataset.num) + e.children.length) % (e.children.length)) * -100 + '%';
};
setInterval(document.getElementById('next').onclick, 3000);