原生DOM经典案例百度轮播图
自己建一个img文件夹放置图片,看代码规则的修改图片名称,和按钮图片
<!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;
}
.box {
width: 950px;
height: 500px;
margin: 0 auto;
outline: 1px solid black;
}
.box::after {
clear: both;
display: block;
content: "";
}
.box2 {
width: 800px;
height: 500px;
outline: 1px solid red;
float: left;
}
.box1 {
width: 75px;
height: 500px;
float: left;
position: relative;
}
.box3 {
width: 75px;
height: 500px;
float: left;
position: relative;
}
img {
width: 800px;
height: 500px;
}
.box1 span {
position: absolute;
display: block;
width: 75px;
height: 75px;
font-size: 75px;
line-height: 75px;
top: 0;
bottom: 0;
margin: auto auto;
/* outline: 1px solid red; */
user-select: none;
}
.box3 span {
position: absolute;
display: block;
width: 75px;
height: 75px;
font-size: 75px;
line-height: 75px;
top: 0;
bottom: 0;
margin: auto auto;
/* outline: 1px solid red; */
user-select: none;
}
.box1:hover {
background-color: rgb(214, 211, 211);
}
.box1:hover span {
color: #fff;
}
.box3:hover {
background-color: rgb(214, 211, 211);
}
.box3:hover span {
color: #fff;
}
.main {
width: 950px;
margin: 20px auto;
height: 154px;
overflow: hidden;
/* outline: 1px solid red; */
position: relative;
transition: all 0.3 linear;
}
ul::after {
clear: both;
display: block;
content: "";
}
ul {
width: 2256px;
/* outline: 1px solid red; */
position: absolute;
top: 0;
left: 0;
transition: all 0.3s linear;
}
li {
list-style: none;
float: left;
margin: 0 10px;
width: 168px;
height: 150px;
margin-top: 2px;
}
li img {
width: 168px;
height: 150px;
border: none;
/* vertical-align: top; */
display: block;
}
.out {
outline: 3px solid red;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"><span><</span></div>
<div class="box2">
<img src="./img/0.jpg" alt="">
</div>
<div class="box3"><span>></span></div>
</div>
<div class="main">
<ul>
</ul>
</div>
</body>
<script>
var img = document.querySelector(".box2 img");
var btn1 = document.querySelector(".box1 span");
var btn2 = document.querySelector(".box3 span");
var ul = document.querySelector("ul")
for (var i = 0; i < 12; i++) {
var li = document.createElement("li");
li.innerHTML = `<img src="./img/${i}.jpg">`
ul.appendChild(li)
}
var lis = document.querySelectorAll("li");
lis[0].classList.add("out")
var imgs = document.querySelectorAll(".main img");
imgs = Array.from(imgs);
var istrue = false;
if (istrue == false) {
anliu()
}
imgs.forEach(function (item, index) {
item.onclick = function () {
istrue = true;
del()
add(index)
if (index >= 3 && index <= 9) {
ul.style.left = -(index - 2) * 188 + "px"
console.log(index)
} else if (index < 3) {
ul.style.left = 0 + "px"
}
var int = index;
btn1.onclick = function () {
int--;
int = int <= 0 ? 0 : int;
del()
add(int);
if (int >= 3 && int < 9) {
ul.style.left = -(int - 2) * 188 + "px"
console.log(int)
} else if (int < 3) {
ul.style.left = 0 + "px"
}
}
btn2.onclick = function () {
int++;
int = int >= 11 ? 11 : int;
del()
add(int);
if (int >= 3 && int < 10) {
ul.style.left = -(int - 2) * 188 + "px"
console.log(int)
} else if (int > 10) {
ul.style.left = -7 * 188 + "px"
}
}
console.log(index)
};
})
function anliu() {
var count1 = 0;
var count = 0;
btn1.addEventListener("click", function () {
// btn1.onclick = function () {
count--;
count = count <= 0 ? 0 : count;
del()
if (count >= 2 && count < 9) {
count1++;
ul.style.left = count1 * 188 + "px"
console.log(count1)
} else if (count < 2) {
ul.style.left = count1 * 188 + "px"
}
add(count)
})
btn2.addEventListener("click", function () {
// btn2.onclick = function () {
count++;
count = count >= 11 ? 11 : count;
del()
if (count > 2 && count < 10) {
count1--;
ul.style.left = count1 * 188 + "px"
console.log(count1)
} else if (count >= 10) {
ul.style.left = count1 * 188 + "px"
}
add(count)
})
}
function del() {
for (var i = 0; i < lis.length; i++) {
lis[i].classList.remove("out")
}
}
function add(cou) {
lis[cou].classList.add("out")
img.src = `./img/${cou}.jpg`
}
</script>
</html>