<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<style>
.swiper {
width: 800px;
height: 500px;
position: relative;
overflow: hidden;
background-color: bisque;
}
.swiper-box {
background-color: pink;
position: absolute;
left: 0;
top: 0;
z-index: 1;
height: 500px;
}
.swiper-box .swiper-item {
width: 800px;
height: 500px;
background-color: aqua;
float: left;
}
.swiper-box .swiper-item img {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div>
<div class="swiper">
<div class="swiper-box" style="left: -800px;">
<div class="swiper-item">
6
<!-- <img src="./index_active.png" alt=""> -->
</div>
<div class="swiper-item">
1
<!-- <img src="./index_gray.png" alt=""> -->
</div>
<div class="swiper-item">
2
<!-- <img src="./my_active.png" alt=""> -->
</div>
<div class="swiper-item">
3
<!-- <img src="./my_gray.png" alt=""> -->
</div>
<div class="swiper-item">
4
<!-- <img src="./Tablet.png" alt=""> -->
</div>
<div class="swiper-item">
5
<!-- <img src="./shouxie.png" alt=""> -->
</div>
<div class="swiper-item">
6
<!-- <img src="./index_active.png" alt=""> -->
</div>
<div class="swiper-item">
1
<!-- <img src="./index_gray.png" alt=""> -->
</div>
</div>
</div>
<div>
<button onclick="prev()">左</button>
<button onclick="next()">右</button>
</div>
</div>
</body>
</html>
<script>
var wrap = $('.swiper-box')[0]
let ok = $('.swiper-item').length
let domArr = $('.swiper-item')
let total = 0
for (let i = 0; i < ok; i++) {
let aa = $($('.swiper-item')[i]).width()
total += aa
console.log('aa', aa);
}
console.log('ok', ok);
$('.swiper-box').css({ width: total + 'px' })
function prev() {
console.log('左', wrap.style.left);
var newLeft
if (wrap.style.left === '-800px') {
newLeft = -4800
} else {
newLeft = parseInt(wrap.style.left) + 800
}
$(wrap).animate({left: newLeft + 'px'})
}
function next() {
console.log('右', wrap.style.left);
var newLeft
if (wrap.style.left === '-4800px') {
newLeft = -800
} else {
newLeft = parseInt(wrap.style.left) - 800
}
$(wrap).animate({left: newLeft + 'px'},1000)
}
var timer = null
function autoPlay() {
timer = setInterval(() => {
next()
}, 3000);
}
autoPlay()
$('.swiper').mouseenter(function () {
clearInterval(timer)
})
$('.swiper').mouseleave(function () {
autoPlay()
})
</script>
