原生JS移动端轮播
css代码
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
.lunbo {
position: relative;
overflow: hidden;
}
.focus_img {
width: 600%;
margin-left: -100%;
}
.focus_img li {
width: 16.666%;
float: left;
}
.focus_img li img {
width: 100%;
}
.list {
position: absolute;
border-radius: 5px;
left: 20px;
bottom: 10px;
padding: 5px 0 0 10px;
height: 15px;
background-color: rgba(0, 0, 0, .3);
cursor: pointer;
}
.list .current {
background-color: orange;
}
.list li {
float: left;
height: 10px;
width: 10px;
background-color: #fff;
border-radius: 50%;
margin-right: 10px;
}
</style>
html代码
<div class="lunbo">
<ul class="focus_img">
<li><img src="./images/04.webp" alt=""></li>
<li><img src="./images/01.webp" alt=""></li>
<li><img src="./images/02.webp" alt=""></li>
<li><img src="./images/03.webp" alt=""></li>
<li><img src="./images/04.webp" alt=""></li>
<li><img src="./images/01.webp" alt=""></li>
</ul>
<ul class="list">
<li class="current" data-index="0"></li>
<li data-index="1"></li>
<li data-index="2"></li>
<li data-index="3"></li>
</ul>
</div>
js代码
var focus = document.querySelector('.lunbo')
var focus_img = document.querySelector('.focus_img')
var list = document.querySelector('.list')
var focusWidth = focus.offsetWidth
var number = 0
var sort = 0
timer = setInterval(function () {
number++
var translateX = -number * focusWidth
focus_img.style.transition = 'all 1s'
focus_img.style.transform = 'TranslateX(' + translateX + 'px)'
changeSort()
}, 2000)
focus_img.addEventListener('transitionend', function () {
if (number == 4) {
number = 0
focus_img.style.transition = 'none'
focus_img.style.transform = 'TranslateX(0px)'
} else if (number < 0) {
number = 3
var translatex = -number * focusWidth
focus_img.style.transition = 'none'
focus_img.style.transform = 'TranslateX(' + translatex + 'px)'
}
flag = true
sort = number
changeSort()
})
startX = 0
moveX = 0
var flag = true
focus_img.addEventListener('touchstart', function (e) {
startX = e.targetTouches[0].pageX
clearInterval(timer)
timer = null
})
focus_img.addEventListener('touchmove', function (e) {
if (flag) {
e.preventDefault()
moveX = e.targetTouches[0].pageX - startX
var translateX = -number * focusWidth + moveX
this.style.transition = 'none'
this.style.transform = 'TranslateX(' + translateX + 'px)'
}
})
focus_img.addEventListener('touchend', function (e) {
if (flag) {
flag = false
if (Math.abs(moveX) >= 50) {
if (moveX > 0) {
number--
} else {
number++
}
var translateX = -number * focusWidth
this.style.transition = 'all 1s'
this.style.transform = 'TranslateX(' + translateX + 'px)'
} else {
var translateX = -number * focusWidth
this.style.transition = 'all .3s'
this.style.transform = 'TranslateX(' + translateX + 'px)'
}
}
clearInterval(timer)
timer = setInterval(function () {
number++
var translateX = -number * focusWidth
focus_img.style.transition = 'all 1s'
focus_img.style.transform = 'TranslateX(' + translateX + 'px)'
}, 3000)
})
function changeSort() {
for (i = 0; i < list.children.length; i++) {
list.children[i].className = ''
}
list.children[sort].className = 'current'
}