闲来无聊随手写个轮播图，嗨，有点一般见笑了，誒，就是玩
简介：首先，本轮播图数据共有4条，可根据需求自行修改，重点在这： 因为要无缝滚动，所以在第一个数据前加一个最后一条数据，在最后一条数据后面加上第一条数据，例如数据时1 2 3 4，结果变成4 1 2 3 4 1，很好理解哈。
直接上代码
1.样式+布局
<div class="swiper">
<div class="imgList">
<div class="imgItem" style="background:green">4</div>
<div class="imgItem" style="background:red">1</div>
<div class="imgItem" style="background:orange">2</div>
<div class="imgItem" style="background:yellow">3</div>
<div class="imgItem" style="background:green">4</div>
<div class="imgItem" style="background:red">1</div>
</div>
<div class="circleList">
<div class="circleItem"></div>
<div class="circleItem"></div>
<div class="circleItem"></div>
<div class="circleItem"></div>
</div>
<div class="btn pre"><</div>
<div class="btn next">></div>
</div>
<style>
* {
margin: 0;
}
.swiper {
position: relative;
width: 800px;
height: 600px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.imgList {
position: absolute;
display: flex;
align-items: center;
transform: translateX(-800px);
}
.imgList .imgItem {
width: 800px;
height: 600px;
font-size: 100px;
line-height: 600px;
text-align: center;
}
.btn {
width: 60px;
height: 40px;
line-height: 35px;
text-align: center;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: calc(50% - 20px);
}
.btn.pre {
left: 0;
}
.btn.next {
right: 0;
}
.circleList {
width: 200px;
height: 40px;
position: absolute;
left: 50%;
bottom: 30px;
display: flex;
transform: translateX(-50%);
justify-content: center;
align-items: center;
}
.circleList .circleItem {
width: 7px;
height: 7px;
border-radius: 4px;
border: 1px solid #ccc;
background: #666666;
margin: 0 2px;
}
</style>
2.声明数据
<script src="https://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
// 数据长度
var lentgh = 4;
// 当前第几个数据
var page = 1;
// 是否可以拖拽
var isDrag = false;
// 开始的x轴相对点
var start = 0;
// 开始的时间
var startTime = 0;
// 轮播图宽度
var swiper_width = 800;
</script>
3.上一个
$(".pre").on("click", function(e) {
page--
console.log(page);
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
if (page < 1) {
page = lentgh;
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
setTimeout(() => {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0s linear"
})
}, 800)
}
})
4.下一个
$(".next").on("click", function(e) {
page++
console.log(page);
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
if (page > lentgh) {
page = 1;
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
setTimeout(() => {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0s linear"
})
}, 800)
}
})
5.设置计时器自动播放，移入暂停，移出开启播放
//设置一个定时器
var intervalId = setInterval(function() {
$(".next").click();
}, 3000)
// 移入
$(".swiper").mouseover(function(e) {
clearInterval(intervalId);
})
// 移出
$(".swiper").mouseleave(function() {
console.log('mouseleave');
intervalId = setInterval(function() {
$(".next").click();
}, 3000)
})
6.点击圆圈切换
$(".circleItem").on("click", function(e) {
var index = $(this).index();
page = index + 1;
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[index]).css({
"background": "#fff"
})
})
7.鼠标快速拖拽和慢速拖拽，慢速拖拽超过一半才会切换，时间小于160毫秒符合快速拖拽
$(".imgList").on('mousedown', (e) => {
startTime = Date.now();
console.log('mousedown');
var event = e || window.e;
start = event.screenX;
isDrag = true;
})
$(".imgList").on('mousemove', (e) => {
if (isDrag) {
var event = e || window.e;
$(".imgList").css({
"transform": `translateX(${-swiper_width*page+(event.screenX-start)}px)`
})
}
})
$(".imgList").on('mouseup', (e) => {
// 快速拖拽
var event = e || window.e;
if (Date.now() - startTime < 160) {
console.log('快速拖拽');
if (event.screenX - start > 0) {
$(".pre").click();
} else {
$(".next").click();
}
}
// 慢速拖拽
else {
console.log('慢速拖拽');
if (event.screenX - start < -swiper_width / 2) {
$(".next").click();
} else if (event.screenX - start > swiper_width / 2) {
$(".pre").click();
} else {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`
})
}
}
isDrag = false;
console.log('mouseup');
})
最后，完整代码
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>pc端轮播图点击和鼠标拖动</title>
<style>
* {
margin: 0;
}
.swiper {
position: relative;
width: 800px;
height: 600px;
overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.imgList {
position: absolute;
display: flex;
align-items: center;
transform: translateX(-800px);
}
.imgList .imgItem {
width: 800px;
height: 600px;
font-size: 100px;
line-height: 600px;
text-align: center;
}
.btn {
width: 60px;
height: 40px;
line-height: 35px;
text-align: center;
font-size: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.2);
position: absolute;
top: calc(50% - 20px);
}
.btn.pre {
left: 0;
}
.btn.next {
right: 0;
}
.circleList {
width: 200px;
height: 40px;
position: absolute;
left: 50%;
bottom: 30px;
display: flex;
transform: translateX(-50%);
justify-content: center;
align-items: center;
}
.circleList .circleItem {
width: 7px;
height: 7px;
border-radius: 4px;
border: 1px solid #ccc;
background: #666666;
margin: 0 2px;
}
.circleList .circleItem:nth-child(1) {
background: #fff;
}
</style>
</head>
<body>
<div class="swiper">
<div class="imgList">
<div class="imgItem" style="background:green">4</div>
<div class="imgItem" style="background:red">1</div>
<div class="imgItem" style="background:orange">2</div>
<div class="imgItem" style="background:yellow">3</div>
<div class="imgItem" style="background:green">4</div>
<div class="imgItem" style="background:red">1</div>
</div>
<div class="circleList">
<div class="circleItem"></div>
<div class="circleItem"></div>
<div class="circleItem"></div>
<div class="circleItem"></div>
</div>
<div class="btn pre"><</div>
<div class="btn next">></div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
// 数据长度
var lentgh = 4;
// 当前第几个数据
var page = 1;
// 是否可以拖拽
var isDrag = false;
// 开始的x轴相对点
var start = 0;
// 开始的时间
var startTime = 0;
// 轮播图宽度
var swiper_width = 800;
// 上一个
$(".pre").on("click", function(e) {
page--
console.log(page);
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
if (page < 1) {
page = lentgh;
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
setTimeout(() => {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0s linear"
})
}, 800)
}
})
// 下一个
$(".next").on("click", function(e) {
page++
console.log(page);
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
if (page > lentgh) {
page = 1;
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[page - 1]).css({
"background": "#fff"
})
setTimeout(() => {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0s linear"
})
}, 800)
}
})
//设置一个定时器
var intervalId = setInterval(function() {
$(".next").click();
}, 3000)
// 移入
$(".swiper").mouseover(function(e) {
clearInterval(intervalId);
})
// 移出
$(".swiper").mouseleave(function() {
console.log('mouseleave');
intervalId = setInterval(function() {
$(".next").click();
}, 3000)
})
// 点击圆圈
$(".circleItem").on("click", function(e) {
var index = $(this).index();
page = index + 1;
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`,
"transition": "all 0.8s linear"
})
$(".circleList .circleItem").css({
"background": "#666666"
})
$($(".circleList .circleItem")[index]).css({
"background": "#fff"
})
})
// 手动拖拽===============================================================================
$(".imgList").on('mousedown', (e) => {
startTime = Date.now();
console.log('mousedown');
var event = e || window.e;
start = event.screenX;
isDrag = true;
})
$(".imgList").on('mousemove', (e) => {
if (isDrag) {
var event = e || window.e;
$(".imgList").css({
"transform": `translateX(${-swiper_width*page+(event.screenX-start)}px)`
})
}
})
$(".imgList").on('mouseup', (e) => {
// 快速拖拽
var event = e || window.e;
if (Date.now() - startTime < 160) {
console.log('快速拖拽');
if (event.screenX - start > 0) {
$(".pre").click();
} else {
$(".next").click();
}
}
// 慢速拖拽
else {
console.log('慢速拖拽');
if (event.screenX - start < -swiper_width / 2) {
$(".next").click();
} else if (event.screenX - start > swiper_width / 2) {
$(".pre").click();
} else {
$(".imgList").css({
"transform": `translateX(${-swiper_width*page}px)`
})
}
}
isDrag = false;
console.log('mouseup');
})
// ===============================================================================
</script>
</body>
</html>
原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。
