js实现简单轮播效果
通过点击，变换图片，记录自己成长的日常。代码如下！！！
<!DOCTYPE html>
<html lang="en">
<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>点击切换</title>
<style>
.wrap {
position: relative;
margin: 50px auto;
width: 600px;
height: 380px;
background-image: url("./images/01.png"); /*最开始显示的图片*/
background-repeat: no-repeat;
background-size: 100% 100%;
box-shadow: rgba(0, 0, 0, .2) 0 1px 5px 0px;
}
.numList,
.imgTitle {
width: 100%;
height: 22px;
color: #fff;
text-align: center;
line-height: 22px;
background: rgba(0, 0, 0, .6);
}
.imgTitle {
position: absolute;
bottom: 0;
left: 0;
}
.leftBtn,
.rightBtn {
width: 40px;
height: 30px;
color: #fff;
cursor: pointer;
background: rgba(0, 0, 0, .6);
}
.leftBtn {
position: absolute;
top: 50%;
left: 0;
}
.leftBtn:after,
.rightBtn:after {
position: absolute;
top: 2px;
left: 10px;
content: "<";
font-size: 20px;
font-weight: bold;
color: #fff;
}
.rightBtn {
position: absolute;
top: 50%;
right: 0;
}
.rightBtn:after {
content: ">";
}
.modeBtn {
margin: 0 auto;
width: 166px;
height: auto;
overflow: hidden;
}
.modeBtn>button {
width: 80px;
height: 40px;
}
</style>
</head>
<body>
<div class="wrap">
<!-- 上方图片序列数 例：1/5-->
<div class="numList">1/5</div>
<!-- 下方标题名称处 例：不忘初心，牢记使命-->
<div class="imgTitle">不忘初心，牢记使命</div>
<!-- 左边按钮 -->
<div class="leftBtn"></div>
<!-- 右边按钮 -->
<div class="rightBtn"></div>
</div>
<!-- 设置两种不同的模式-->
<div class="modeBtn">
<button>正常模式</button>
<button>循环模式</button>
</div>
<script>
// 获取各个元素,index用来接收变化之后图片的下标，通过改变下标的方式改变图片
let oWrp = document.querySelector(".wrap"),
oNumList = document.querySelector(".numList"),
oImgTitle = document.querySelector(".imgTitle"),
oLeftBtn = document.querySelector(".leftBtn"),
oRightBtn = document.querySelector(".rightBtn"),
oModeBtn = document.querySelectorAll(".modeBtn button"),
index = 1;
// 封装函数，减少代码量
function myFun() {
oWrp.style.backgroundImage = "url(./images/0" + index + ".png)"; //字符串拼接，图片命名格式为:01.png,然后更改图片路径，就可以啦，图片数为5，可添加 添加图片后可稍稍修改代码
oNumList.innerHTML = "" + index + "/5"
}
// 图片名称，封装函数，减少代码量，也可通过数组的方法更改标题名称
function titleFun(num) {
if (num == 1) {
oImgTitle.innerHTML = "不忘初心，牢记使命";
} else if (num == 2) {
oImgTitle.innerHTML = "在祖国70周年国庆之际";
} else if (num == 3) {
oImgTitle.innerHTML = "祝祖国繁荣昌盛";
} else if (num == 4) {
oImgTitle.innerHTML = "祝博客园越来越好";
} else if (num == 5) {
oImgTitle.innerHTML = "祝我越学越精";
}
}
// 正常模式下
oModeBtn[0].onclick = function() {
oModeBtn[0].style.backgroundColor = "red";
oModeBtn[1].style.backgroundColor = "";
oRightBtn.onclick = function() {
index++;
if (index == 6) index = 5;
myFun();
titleFun(index);
}
oLeftBtn.onclick = function() {
index--;
if (index == 0) index = 1;
myFun();
titleFun(index);
}
}
// 循环模式下
oModeBtn[1].onclick = function() {
oModeBtn[0].style.backgroundColor = "";
oModeBtn[1].style.backgroundColor = "red";
oRightBtn.onclick = function() {
index++;
if (index == 6) index = 1;
myFun();
titleFun(index);
}
oLeftBtn.onclick = function() {
index--;
if (index == 0) index = 5;
myFun();
titleFun(index);
}
}
</script>
</body>
</html>
效果图如下！
欢迎各位批评指导！！！
