HTML实现横向滚动换页

平常做滑动切屏一般都会使用swiper.js，最近因个人项目需要，不想引入其他库，所以用原生js+css3写了个横向滚动换页，在此跟大家分享一下。效果如下：

1、页面布局

因为主要在移动端使用，所以其中screen模拟了个手机屏幕大小

<div class="screen">
        <ul class="list">
            <li style="background-color: red"></li>
            <li style="background-color: green"></li>
            <li style="background-color: blue"></li>
            <li style="background-color: yellow"></li>
            <li style="background-color: deepskyblue"></li>
            <li style="background-color: orange"></li>
        </ul>
    </div>

2、样式

清除了ul、li的原本样式，ul相对布局包裹绝对布局的li，这是滚动切屏基本的东西。pre、current、next分别代表当显示item的前一个，当前item，后一个item的样式。

ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
.screen {
    width: 320px;
    height: 568px;
    background-color: white;
    border: 1px solid #ccc;
    overflow-x: hidden;
}
.list {
    height: 400px;
    position: relative;
    transition: all 1s;
}
.list li {
    width: 70%;
    height: 100%;
    position: absolute;
    transition: all 1s;
    top: 0;
}
.list li.pre {
    transform: skewY(10deg) scale(0.9)
}
.list li.current {
    transform: none
}
.list li.next {
    transform: skewY(-10deg) scale(0.9)
}

3、关键

好了，样式和html都比较简单，接下来就该js了

1）首先我们获取到包裹item的元素，并选取到我们所有的item元素

    var wrapper = document.querySelector('.list')
    var els = wrapper.querySelectorAll('li')

2）接下来定义两个下标，一个是默认选择的，一个是当前选择的，我们这里默认选择0。

    var defaultIndex = 0
    var curIndex = 0

3）好了，我们接下来设置每个item的初始状态，初始化就算完成了

for (var i = 0;i < els.length; i++) {
    els[i].style.left = (15 + (i - defaultIndex) * 70) + '%'
    if (i === defaultIndex) {
        els[i].className = 'current'
    } else if (i === defaultIndex - 1) {
        els[i].className = 'pre'
    } else if (i === defaultIndex + 1) {
        els[i].className = 'next'
    }
}

4）下面是核心部分，每次前进或后退的时候都触发change方法，重新设置item和wrapper样式。

function toNext () {
     if (curIndex >= els.length - 1) {
         return
     }
     curIndex++
     change()
 }

function toPre () {
     if (curIndex <= 0) {
         return
     }
     curIndex--
     change()
 }

change方法如下：

function change () {
    var translateX = -(curIndex - defaultIndex) * 70 + '%'
    wrapper.style.transform = 'translate(' + translateX + ', 0)'
    wrapper.webkitTransform = 'translate(' + translateX + ', 0)'
    els[curIndex].className = 'current'
    if (curIndex !== els.length - 1) {
        els[curIndex + 1].className = 'next'
    }
    if (curIndex !== 0) {
        els[curIndex - 1].className = 'pre'
    }
}

5）好了，到此我们就算写完了，再需要的时候只用调用toPre()或者toNext()就可以了，这里我使用的定时器调用。

var i = 0
var interval = setInterval(function () {
    toNext()
    if (i === 2) {
        clearInterval(interval)
        setInterval(function () {
            toPre()
        }, 1000)
    }
    i++
}, 1000)