轮播单边、循环模式切换基本写法
<!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>
<style>
* {
margin: 0;
padding: 0;
font-family: Micosoft yahei, serif;
}
#banner {
position: relative;
width: 600px;
height: 375px;
border: 1px solid #ccc;
margin: 50px auto;
}
#banner ul li {
position: absolute;
list-style: none;
background-color: pink;
}
#banner ul li img {
/* display: block; */
width: 100%;
display: none;
}
#banner p {
position: absolute;
width: 100%;
line-height: 25px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}
#banner p.top {
top: 0;
}
#banner p.bottom {
bottom: 0;
}
#banner a {
position: absolute;
text-decoration: none;
width: 40px;
color: #fff;
font-size: 25px;
top: 50%;
margin-top: -15px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
}
#banner a.prev {
left: 0;
}
#banner a.next {
right: 0;
}
.btnBar {
position: relative;
width: 600px;
margin: 50px auto;
text-align: center;
background-color: skyblue;
}
.btnBar button {
padding: 10px;
background-color: #ccc;
}
.btnBar button.active {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<p class="top">1/5</p>
<p class="bottom">植物</p>
<a class="prev" href="javascript:void(0);"><</a>
<a class="next" href="javascript:void(0);">></a>
</div>
<div class="btnBar">
<button class="active">正常模式</button>
<button>循环模式</button>
</div>
<script>
//获取dom元素
let aImg = document.getElementsByTagName("img")
let aBtn = document.getElementsByTagName("a") //左右按钮一起获得，因为页面上没有其他a标签
let oBottom = document.getElementsByClassName("bottom")[0]//通过类数组取第一个元素，不写【0】获取的是一个集合
let oTop = document.getElementsByClassName("top")[0]
let aBut = document.querySelectorAll(".btnBar button");
let arrText = ["植物", "大战", "僵尸", "植物大战僵尸", "植物大战僵尸中文版"]
//信号量 ：用来表示显示那张图片
let num = 0;
let onOff = "true" //循环模式和单边模式开关 true为单边 false为循环
let len = aImg.length;
aImg[num].style.display = "block"; //让索引为num的图片显示
aBtn[0].onclick = function () {
aImg[num].style.display = "none";//num之前的变成none
num--;
if (num < 0) {
// if (onOff) {
// num = 0;
// } else {
// num = len - 1
// }
num = onOff ? 0 : len - 1;// 三目优化写法
}
aImg[num].style.display = "block";
oBottom.innerHTML = arrText[num]; //图片与文字一一对应
oTop.innerHTML = `${num + 1}/${len}` //es6之前的写法 (1+num) + '/' +len;
}
aBtn[1].onclick = function () {
aImg[num].style.display = "none";//num++之前的变成none
num++
// if(onOff){ //常规写法为true是单边模式 超出拉回到len-1 否则超出拉回到0的位置
// if (num >= len) {
// num = len - 1;
// }
// }else{
// if (num >= len) {
// num = 0;
// }
// }
//优化的判断方法，只考虑超出的情况
if (num >= len) {
// if (onOff) {
// num = len - 1;
// } else {
// num = 0
// }
num = onOff ? len - 1 : 0; //三目优化写法
}
aImg[num].style.display = "block"
oBottom.innerHTML = arrText[num]; //图片与文字一一对应
oTop.innerHTML = `${num + 1}/${len}` //es6之前的写法 (1+num) + '/' +len;
}
//循环/单边模式切换
aBut[0].onclick = function () {
console.log(1111);
onOff = true;
this.className = "active";//切换背景颜色,自己为红
aBut[1].className = "";//另一个背景颜色为空
}
aBut[1].onclick = function () {
console.log(222);
onOff = false;
this.className = "active";//切换背景颜色,自己为红
aBut[0].className = "";//另一个背景颜色为空
}
</script>
</body>
</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>
<style>
* {
margin: 0;
padding: 0;
font-family: Micosoft yahei, serif;
}
#banner {
position: relative;
width: 600px;
height: 375px;
border: 1px solid #ccc;
margin: 50px auto;
}
#banner ul li {
position: absolute;
list-style: none;
background-color: pink;
}
#banner ul li img {
/* display: block; */
width: 100%;
display: none;
}
#banner p {
position: absolute;
width: 100%;
line-height: 25px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
color: #fff;
}
#banner p.top {
top: 0;
}
#banner p.bottom {
bottom: 0;
}
#banner a {
position: absolute;
text-decoration: none;
width: 40px;
color: #fff;
font-size: 25px;
top: 50%;
margin-top: -15px;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, .5);
}
#banner a.prev {
left: 0;
}
#banner a.next {
right: 0;
}
.btnBar {
position: relative;
width: 600px;
margin: 50px auto;
text-align: center;
background-color: skyblue;
}
.btnBar button {
padding: 10px;
background-color: #ccc;
}
.btnBar button.active {
background-color: red;
color: #fff;
}
</style>
</head>
<body>
<div id="banner">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<p class="top">1/5</p>
<p class="bottom">植物</p>
<a class="prev" href="javascript:void(0);"><</a>
<a class="next" href="javascript:void(0);">></a>
</div>
<div class="btnBar">
<button class="active">正常模式</button>
<button>循环模式</button>
</div>
<script>
//获取dom元素
let aImg = document.getElementsByTagName("img")
let aBtn = document.getElementsByTagName("a") //左右按钮一起获得，因为页面上没有其他a标签
let oBottom = document.getElementsByClassName("bottom")[0]//通过类数组取第一个元素，不写【0】获取的是一个集合
let oTop = document.getElementsByClassName("top")[0]
let aBut = document.querySelectorAll(".btnBar button");
let arrText = ["植物", "大战", "僵尸", "植物大战僵尸", "植物大战僵尸中文版"]
//信号量 ：用来表示显示那张图片
let num = 0;
let onOff = "true" //循环模式和单边模式开关 true为单边 false为循环
let len = aImg.length;
aImg[num].style.display = "block"; //让索引为num的图片显示
aBtn[0].onclick = function () {
fun(true)
}
aBtn[1].onclick = function () {
fun(false)
}
function fun(bol) { //相同代码抽离出来
aImg[num].style.display = "none";
bol ? num-- : num++;
if (num < 0) {
num = onOff ? 0 : len - 1;
}
if (num >= len) {
num = onOff ? len - 1 : 0;
}
aImg[num].style.display = "block"
oBottom.innerHTML = arrText[num];
oTop.innerHTML = `${num + 1}/${len}`
}
//循环/单边模式切换
aBut[0].onclick = function () {
console.log(1111);
onOff = true;
this.className = "active";//切换背景颜色,自己为红
aBut[1].className = "";//另一个背景颜色为空
}
aBut[1].onclick = function () {
console.log(222);
onOff = false;
this.className = "active";//切换背景颜色,自己为红
aBut[0].className = "";//另一个背景颜色为空
}
</script>
</body>
</html>
网友评论