实现功能
1、自动轮播
2、鼠标划入左右按钮出现,划出消失
3、左右按钮点击转换
4、下方小圆点实现切换
效果
html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="box">
<!-- 图片 -->
<div class="img1">
<img src="./res/img1.jpg" alt="">
</div>
<div class="img2">
<img src="./res/img2.jpg" alt="">
</div>
<div class="img3">
<img src="./res/img3.jpg" alt="">
</div>
<div class="img4">
<img src="./res/img4.jpg" alt="">
</div>
<div class="img5">
<img src="./res/img5.jpg" alt="">
</div>
<!-- 左右按钮 -->
<div class="leftBtn"><</div>
<div class="rightBtn">></div>
<!-- 下面用于跳转的小圆点 -->
<div class="jump">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script src="./src/jquery-3.3.1.js"></script>
<script src="./src/script.js"></script>
</body>
</html>
css 文件
* {
margin: 0px;
padding: 0px;
}
/* 设置轮播图盒子位置及大小 */
.box {
position: relative;
width: 520px;
height: 280px;
margin: auto;
}
/* 设置图片 */
.box img {
position: absolute;
opacity: 0;
transition: all 1.5s;
}
.box .img1 img {
opacity: 1;
}
/* 设置左按钮 */
.leftBtn {
width: 20px;
height: 35px;
position: absolute;
top:120px;
background-color: rgba(0,0,0, .3);
color:white;
text-align: center;
font-size: 20px;
line-height: 35px;
border-radius: 0 30% 30% 0;
display: none;
}
.leftBtn:hover {
background-color: rgba(0,0,0, .6);
}
/* 设置右按钮 */
.rightBtn {
width: 20px;
height: 35px;
position: absolute;
right: 0px;
top:120px;
background-color: rgba(0,0,0, .3);
color:white;
text-align: center;
font-size: 20px;
line-height: 35px;
border-radius: 30% 0 0 30%;
display: none;
}
.rightBtn:hover {
background-color: rgba(0,0,0, .6);
}
/* 下面用于跳转的小圆点 */
.jump ul{
position: absolute;
list-style: none;
bottom: 10px;
right:220px;
}
.jump li {
width: 8px;
height: 8px;
background-color: white;
border-radius: 100%;
float: left;
margin-right: 4px;
}
li:first-child {
background-color: red;
}
js 文件
$(function() {})
是 $(document).ready(function()
的简写, 这个函数在 DOM 加载完毕之后执行。
$(function () {
let index = 0; // 图片索引
let timer;
time();
// 计时器函数
function time() {
timer = setInterval(function () {
index++
if (index == $('.box img').length) {
index = 0;
// 设置图片透明与否
$('.box img').css("opacity", "0");
$('.box img').eq(index).css("opacity", "1");
// 设置下方圆点变化样式
$('.jump li').css("background-color", "white");
$('.jump li').eq(index).css("background-color", "red");
} else {
// 设置图片透明与否
$('.box img').css("opacity", "0");
$('.box img').eq(index).css("opacity", "1");
// 设置下方圆点变化样式
$('.jump li').css("background-color", "white");
$('.jump li').eq(index).css("background-color", "red");
}
}, 3000)
}
// 鼠标移入图片盒子时左右按钮显示
$('.box').mouseover(function() {
$('.leftBtn').css('display','block');
$('.rightBtn').css('display','block');
})
$('.box').mouseout(function() {
$('.leftBtn').css('display','none');
$('.rightBtn').css('display','none');
})
// 设置左按钮
$('.leftBtn').click(function() {
clearInterval(timer);
if (index == 0) {
index = $('.box img').length - 1;
} else {
index--;
}
// 设置图片透明与否
$('.box img').css("opacity", "0");
$('.box img').eq(index).css("opacity", "1");
// 设置下方圆点变化样式
$('.jump li').css("background-color", "white");
$('.jump li').eq(index).css("background-color", "red");
time();
})
// 设置右按钮
$('.rightBtn').click(function () {
clearInterval(timer);
if (index == $('.box img').length - 1) {
index = 0;
} else {
index++;
}
// 设置图片透明与否
$('.box img').css("opacity", "0");
$('.box img').eq(index).css("opacity", "1");
// 设置下方圆点变化样式
$('.jump li').css("background-color", "white");
$('.jump li').eq(index).css("background-color", "red");
time();
})
// 设置下面用于跳转的小圆点
for (let i = 0; i <= $('li').length; i++) {
$('li').eq(i).click(function () {
clearInterval(timer);
index = i;
// 设置图片透明与否
$('.box img').css("opacity", "0");
$('.box img').eq(index).css("opacity", "1");
// 设置下方圆点变化样式
$('.jump li').css("background-color", "white");
$('.jump li').eq(index).css("background-color", "red");
time();
})
}
})