186 lines
4.1 KiB
HTML
186 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>轮播图</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<style>
|
|
body,ul,li {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
.swiper {
|
|
width: 520px;
|
|
height: 280px;
|
|
overflow: hidden;
|
|
margin: 10% auto;
|
|
position: relative;
|
|
}
|
|
.swiper-wrapper {
|
|
display: flex;
|
|
}
|
|
.swiper-wrapper img {
|
|
width: 520px;
|
|
height: 280px;
|
|
}
|
|
.swiper-button {
|
|
position: absolute;
|
|
top: 50%;
|
|
color: #fff;
|
|
font-size: 23px;
|
|
padding: 5px 5px;
|
|
background: #00000075;
|
|
transform: translateY(-50%);
|
|
}
|
|
.prev {
|
|
left: 0;
|
|
}
|
|
.next {
|
|
right: 0;
|
|
}
|
|
.swiper-pagination {
|
|
display: flex;
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 16px;
|
|
transform: translate(-50%);
|
|
}
|
|
.swiper-pagination li {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 100%;
|
|
background: #CCC;
|
|
margin-right: 5px;
|
|
}
|
|
.swiper-pagination .active {
|
|
background: #007aff !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="swiper">
|
|
|
|
<ul class="swiper-wrapper" style="transform: translateX(0px);">
|
|
<li>
|
|
<img src="img/1.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="img/2.jpg" alt="">
|
|
</li>
|
|
<li>
|
|
<img src="img/3.jpg" alt="">
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 如果需要分页器 -->
|
|
<ul class="swiper-pagination">
|
|
<li class="active"></li>
|
|
<li></li>
|
|
<li></li>
|
|
</ul>
|
|
|
|
<!--上一页-->
|
|
<div class="swiper-button prev"><</div>
|
|
<!--下一页-->
|
|
<div class="swiper-button next">></div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
<script>
|
|
var prev = $(".swiper .prev"),
|
|
next = $(".next"),
|
|
swiper = $(".swiper"),
|
|
pagination = $(".swiper .swiper-pagination li"),
|
|
timer = null;
|
|
|
|
prev.onclick = function () {
|
|
animation(520)
|
|
}
|
|
|
|
next.onclick = function () {
|
|
animation(-520)
|
|
}
|
|
|
|
function animation(offset) {
|
|
var val = parseInt($(".swiper-wrapper").style.transform.match(/translateX\(([\s\S]*?)\)/)[1]);
|
|
var newOffset = offset + val;
|
|
if (newOffset > 0) {
|
|
newOffset = -1040;
|
|
}
|
|
if (newOffset < -1040) {
|
|
newOffset = 0;
|
|
}
|
|
|
|
changePagination(Math.abs(newOffset / 520))
|
|
$(".swiper-wrapper").style.transform = `translateX(${newOffset}px)`;
|
|
}
|
|
|
|
function PaginationClick() {
|
|
pagination.forEach(function (v,i) {
|
|
v.onclick = function () {
|
|
changePagination(i)
|
|
}
|
|
})
|
|
}
|
|
|
|
function changePagination(i) {
|
|
pagination.forEach(function (item) {
|
|
item.className = ""
|
|
});
|
|
pagination[i].className = "active";
|
|
$(".swiper-wrapper").style.transform = `translateX(${i * -520}px)`;
|
|
}
|
|
|
|
function autoPlay() {
|
|
timer = setInterval(function () {
|
|
next.onclick()
|
|
},1000);
|
|
}
|
|
|
|
PaginationClick();
|
|
autoPlay()
|
|
|
|
|
|
|
|
swiper.onmouseover = function () {
|
|
clearInterval(timer)
|
|
}
|
|
|
|
swiper.onmouseout = function () {
|
|
autoPlay()
|
|
}
|
|
|
|
function $(className) {
|
|
var newClassName = className.split(" ");
|
|
if (newClassName.length > 1) {
|
|
var father = newClassName[newClassName.length - 2];
|
|
var childrenList = document.querySelector(father).children;
|
|
|
|
var arr = Array.from(childrenList).filter(function (el){
|
|
if (
|
|
el.className.indexOf( (newClassName[newClassName.length-1]).replace(".", "") ) > -1
|
|
||
|
|
el.tagName.toLowerCase() == newClassName[newClassName.length-1]
|
|
) {
|
|
return el;
|
|
}
|
|
});
|
|
|
|
if (arr.length > 1) {
|
|
return document.querySelectorAll(className)
|
|
} else if (arr.length == 1){
|
|
return document.querySelector(className)
|
|
} else {
|
|
throw new Error(`${className} 不存在，请检查`)
|
|
}
|
|
|
|
} else {
|
|
return document.querySelector(newClassName);
|
|
|
|
}
|
|
}
|
|
</script>
|
|
</html> |