核心代码
html
<!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>
<link rel="stylesheet" href="css/index.css" type="text/css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<div class="container">
<div class="wxj_swiper">
<ul class="wxj_ul">
<li>
<img src="img/0.jpg" alt="">
</li>
<li>
<img src="img/1.jpg" alt="">
</li>
<li>
<img src="img/5.jpg" alt="">
</li>
</ul>
<div class="directive_left">
<
</div>
<div class="directive_right">
>
</div>
<div class="wxj_dot">
</div>
</div>
</div>
</body>
<script src="js/index.js"></script>
</html>
css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
ul {
list-style: none;
}
div.container {
width: 100vw;
height: 100vh;
div.wxj_swiper {
margin: 200px auto;
width: 600px;
height: 400px;
overflow: hidden;
position: relative;
ul {
display: flex;
width: calc(600px * 5);
height: 400px;
position: absolute;
left: -600px;
// transition: left 0.5s linear;
li {
width: 600px;
height: 400px;
img {
width: 100%;
height: 100%;
}
}
}
.directive_left{
cursor: pointer;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.5);
color: #fff;
font-size: 30px;
font-weight: 600;
position: absolute;
left: 0;
top:50%;
transform: translate(0,-50%);
z-index: 999;
}
.directive_right{
cursor: pointer;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,.5);
color: #fff;
font-size: 30px;
font-weight: 600;
position: absolute;
right: 0;
top:50%;
transform: translate(0,-50%);
z-index: 999;
}
.wxj_dot{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 50%;
bottom:20px;
transform: translate(-50%,0);
z-index: 999;
.item{
width: 15px;
height: 15px;
background-color: #fff;
border-radius: 50%;
margin-left: 10px;
&:nth-of-type(1){
margin: 0;
}
}
.active{
background-color: aqua;
}
}
}
}
js
$(function () {
class swiper {
constructor(options = { baseEle: null, hasDot: "true", hasDir: "true", autoplay: "true", durtion: 3000, time: 500, directive: "" }) {
this.baseEle = options.baseEle
this.autoplay = options.autoplay || "true"
this.durtion = options.durtion || 3000
this.hasDot = options.hasDot || "true"
this.hasDir = options.hasDir || "true"
this.length = 0
this.directive = options.directive || "right"
this.currentIndex = 1
this.timer = null
this.time = options.time || 500
this.ul = null
this.init()
}
init() {
let isinit = this.isHasBase()
if (!isinit) {
console.log("请输入根节点")
return
}
this.isShowDot()
this.isShowDir()
this.ul = $(".wxj_ul")
this.createEle()
this.length = $(".wxj_ul li").length
let arr = []
for (let i = 0; i < this.length - 2; i++) {
let ele = `<div class="item" index=${i}></div>`
arr.push(ele)
}
$(".wxj_dot").append(arr)
this.move();
this.autoColor()
this.baseEle.on("mouseenter", () => {
clearInterval(this.timer)
})
this.baseEle.on("mouseleave", () => {
this.move()
})
$(".directive_left").on("click", () => {
clearInterval(this.timer)
this.pre()
})
$(".directive_right").on("click", () => {
clearInterval(this.timer)
this.next()
})
$(".wxj_dot").on("click", (e) => {
if (e.target.className.includes("item")) {
let index = $(e.target).attr("index") - 0
this.currentIndex = index + 1
this.autoColor()
let number = -this.currentIndex * 600
this.ul.animate({ "left": number + "px" }, this.time)
}
})
}
isHasBase() {
if ($(this.baseEle).length!=1) {
return false
}
this.baseEle = $(this.baseEle)
return true
}
isShowDot() {
console.log(this.hasDot, this.durtion);
if (this.hasDot !== "true") {
$(".wxj_dot").hide()
}
}
isShowDir() {
if (this.hasDir !== "true") {
$(".directive_left").hide()
$(".directive_right").hide()
}
}
move() {
switch (this.directive) {
case "left":
this.timer = setInterval(() => {
this.pre()
}, this.durtion)
break;
case "right":
this.timer = setInterval(() => {
this.next()
}, this.durtion)
break;
default:
console.log("err");
break;
}
}
next() {
if (this.currentIndex < this.length - 1) {
this.currentIndex += 1
let number = this.currentIndex * 600 * -1
this.ul.animate({ "left": number + "px" }, this.time)
if (this.currentIndex >= this.length - 1) {
this.currentIndex = 1
let number = -this.currentIndex * 600
this.ul.animate({
"left": number + "px"
}, 0)
}
}
this.autoColor()
}
pre() {
if (this.currentIndex <= this.length - 1) {
this.currentIndex -= 1
let number = -this.currentIndex * 600
this.ul.animate({ "left": number + "px" }, this.time)
if (this.currentIndex <= 0) {
this.currentIndex = this.length - 2
let number = -this.currentIndex * 600
this.ul.animate({
"left": number + "px"
}, 0)
}
}
this.autoColor()
}
autoColor() {
$(".wxj_dot .item").eq(this.currentIndex - 1).addClass("active").siblings().removeClass("active")
}
createEle() {
let ele1 = $(".wxj_ul li").eq(0).clone()
let ele2 = $(".wxj_ul li").eq($(".wxj_ul li").length - 1).clone()
$(".wxj_ul").append(ele1)
$(".wxj_ul").prepend(ele2)
}
}
new swiper({baseEle:".wxj_swiper", durtion: 5000, hasDir: "true", hasDot: "false" })
})