【Javascript】【jQuery】jQuery实现轮播图
实现一个完整的轮播图用到的知识点
????元素在父容器中水平垂直居中
????利用CSS生成圆点
????让图片和父容器一样大，并隐藏多余部分
????均匀滑动
????循环滑动
????自动循环滑动
????点击圆点可以滑动到指定页面
????点击按钮可以前后滑动
????鼠标移入时，停止自动滑动
????滑动过程中，不可操作
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<link rel="stylesheet" type="text/css" href="../css/page_slide.css"/>
<script type="text/javascript" src="../js/jquery-3.4.0.js"></script>
<script type="text/javascript" src="../js/page_slide.js"></script>
<body>
<div id="container">
<div id="image-list">
<img src="../image/t05.jpg"/>
<img src="../image/t01.jpg"/>
<img src="../image/t02.jpg"/>
<img src="../image/t03.jpg"/>
<img src="../image/t04.jpg"/>
<img src="../image/t05.jpg"/>
<img src="../image/t01.jpg"/>
</div>
<div id="dot-list">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div id="buttons">
<img src="../image/btn_pre.png" id="btn-pre"/>
<img src="../image/btn_next.png" id="btn-next"/>
</div>
</div>
</body>
</html>
css代码
* {
padding: 0;
margin: 0;
}
#container {
width: 800px;
height: 450px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -225px;
overflow: hidden;
}
#dot-list {
width: 100px;
height: 20px;
position: absolute;
bottom: 0px;
left: 50%;
margin-left: -50px;
margin-bottom: 10px;
-webkit-user-select: none;
z-index: 3;
}
#dot-list > span {
width: 10px;
height: 5px;
box-sizing: border-box;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
display: inline-block;
background: white;
}
#dot-list > span.selected {
background: deepskyblue;
}
#image-list {
width: 5600px;
height: 450px;
position: absolute;
font-size: 0px;
}
#image-list > img {
width: 800px;
height: 450px;
}
#buttons {
width: 800px;
height: 450px;
position: absolute;
font-size: 0px;
z-index: 2;
}
#btn-pre {
width: auto;
height: 150px;
cursor: pointer;
position: absolute;
left: 0px;
top: 50%;
margin-top: -75px;
}
#btn-next {
width: auto;
height: 150px;
cursor: pointer;
position: absolute;
right: 0px;
top: 50%;
margin-top: -75px;
}
#btn-pre:hover {
background: rgba(255, 255, 255, 0.2);
}
#btn-next:hover {
background: rgba(255, 255, 255, 0.2);
}
js代码
$(() => {
//获取需要使用的元素
$container = $("#container");
$imageList = $("#image-list");
$images = $("#image-list>img");
$dot = $("#dot-list>span");
$pre = $("#btn-pre");
$next = $("#btn-next");
//图片大小
const imageWidth = $container.width();
//当前图片
let currentPage = 0;
//要滑到的图片
let targetPage = 0;
//正在滑动
let moving = false;
//滑动一次需要的时间
const duration = 800;
//默认显示第一张图片
$imageList.css("left", -imageWidth);
//默认选中第一个圆点
$($dot[0]).addClass("selected");
//定时自动滑动
let intervalId = autoSlide();
//鼠标移入时，取消滑动，移出时继续
$container.hover(() => {
clearInterval(intervalId);
}, () => {
intervalId = autoSlide();
});
//点击圆点，滑动至对应页面
$dot.click(function () {
let index = $(this).index();
if (index != currentPage)
moveToPage(index);
});
//点击向前向后按钮，滑动至上一页下一页
$pre.click(() => {
moveToPage(currentPage - 1);
});
$next.click(() => {
moveToPage(currentPage + 1);
});
//自动滑动
function autoSlide() {
return setInterval(() => {
moveToPage(currentPage + 1);
}, 3000);
}
//滑动页面，向前-1，向后1，指定页面target-current
function moveToPage(page) {
if (moving)
return;
moving = true;
targetPage = page;
let pageSize = page - currentPage;
//每20ms滑动一帧
let interval = 20;
let offsetX = -(currentPage + 1) * imageWidth;
let dx = pageSize * imageWidth * interval / duration;
let intervalId = setInterval(() => {
offsetX -= dx;
$imageList.css("left", offsetX);
//滑动完成
if (offsetX == -(targetPage + 1) * imageWidth) {
//如果滑动到首尾的辅助元素，则瞬移到对应的真实元素
if (targetPage == 5)
targetPage = 0;
if (targetPage == -1)
targetPage = 4;
$imageList.css("left", -(targetPage + 1) * imageWidth);
//同步变更圆点样式
$($dot[currentPage]).removeClass("selected");
$($dot[targetPage]).addClass("selected");
//滑动结束，清除定时器
clearInterval(intervalId);
currentPage = targetPage;
moving = false;
}
}, interval);
}
});
效果图