165 lines
4.0 KiB
HTML
165 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="http://at.alicdn.com/t/font_2576965_pg56sl6byua.css">
|
|
<style>
|
|
.swiper-container {
|
|
width: 520px;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
margin: 100px auto;
|
|
position: relative;
|
|
}
|
|
.swiper-pagination {
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.swiper-pagination-item {
|
|
width: 15px;
|
|
height: 15px;
|
|
border-radius: 100%;
|
|
background: #fff;
|
|
margin-right: 10px;
|
|
cursor: pointer;
|
|
}
|
|
.swiper-wrapper {
|
|
display: flex;
|
|
}
|
|
.swiper-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
font-size: 25px;
|
|
cursor: pointer;
|
|
}
|
|
.swiper-button-prev {
|
|
left: 10px;
|
|
}
|
|
.swiper-button-next {
|
|
right: 10px;
|
|
}
|
|
.active {
|
|
background: red;
|
|
}
|
|
.dh {
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="swiper-container">
|
|
|
|
<div class="swiper-wrapper dh" style="transform: translateX(0px);">
|
|
<div class="swiper-slide">
|
|
<img src="https://img.alicdn.com/imgextra/i3/6000000003220/O1CN01XY3FdI1Zeo1AKZyRK_!!6000000003220-0-octopus.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1XotJXQfb_uJkSnhJSuvdDVXa.jpg" alt="">
|
|
</div>
|
|
<div class="swiper-slide">
|
|
<img src="https://aecpm.alicdn.com/simba/img/TB1JNHwKFXXXXafXVXXSutbFXXX.jpg" alt="">
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 如果需要分页器 -->
|
|
<div class="swiper-pagination">
|
|
<div class="swiper-pagination-item active"></div>
|
|
<div class="swiper-pagination-item"></div>
|
|
<div class="swiper-pagination-item"></div>
|
|
</div>
|
|
|
|
<!-- 如果需要导航按钮 -->
|
|
<div class="swiper-button swiper-button-prev iconfont icon-zuo"></div>
|
|
<div class="swiper-button swiper-button-next iconfont icon-zhankai-copy"></div>
|
|
|
|
|
|
</div>
|
|
</body>
|
|
<script>
|
|
|
|
var pagination = _(".swiper-pagination .swiper-pagination-item");
|
|
var timer;
|
|
// 上一页
|
|
$(".swiper-button-prev").onclick = function () {
|
|
motion(520,'prev')
|
|
}
|
|
|
|
// 下一页
|
|
$(".swiper-button-next").onclick = function () {
|
|
motion(-520,'next')
|
|
}
|
|
|
|
// 运动
|
|
function motion(offset, type) {
|
|
|
|
var totalDistance = translateX() + offset;
|
|
if (totalDistance < -1040) {
|
|
totalDistance = 0
|
|
}
|
|
|
|
if (totalDistance > 0) {
|
|
totalDistance = -1040
|
|
}
|
|
SetTranslateX(totalDistance)
|
|
// 要去的下一页的下标
|
|
var index = Math.abs(totalDistance / 520)
|
|
changePagination(index)
|
|
}
|
|
|
|
// 小圆点点击切换轮播图
|
|
pagination.forEach((v,i) => {
|
|
v.onclick = () => {
|
|
changePagination(i)
|
|
}
|
|
});
|
|
|
|
function changePagination(i) {
|
|
pagination.forEach(item => item.classList.remove("active"))
|
|
pagination[i].classList.add("active")
|
|
SetTranslateX(i * -520)
|
|
}
|
|
|
|
// 让图片移动
|
|
function SetTranslateX(distance) {
|
|
$(".swiper-wrapper").style.transform = `translateX(${distance}px)`
|
|
}
|
|
|
|
function AutoPlay() {
|
|
timer = setInterval(() => {
|
|
$(".swiper-button-next").onclick()
|
|
},1000)
|
|
}
|
|
|
|
$(".swiper-container").onmouseover = function () {
|
|
clearInterval(timer)
|
|
}
|
|
|
|
$(".swiper-container").onmouseleave = function () {
|
|
AutoPlay()
|
|
}
|
|
|
|
AutoPlay()
|
|
|
|
// 返回元素上的距离
|
|
function translateX() {
|
|
return Number($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)px\)/)[1])
|
|
}
|
|
|
|
function $(className) {
|
|
return document.querySelector(className);
|
|
}
|
|
|
|
function _(className) {
|
|
return document.querySelectorAll(className);
|
|
}
|
|
</script>
|
|
</html> |