版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/u012495579/article/details/67638296
平常做滑动切屏一般都会使用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)