<!DOCTYPE html>
<html>
<head>
<title>轮播图的实现</title>
<style>
* {
padding: 0;
margin: 0;
}
.lunbo {
width: 600px;
height: 500px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
border: 1px solid red;
}
.content {
width: 100%;
height: 100%;
}
#item {
width: 100%;
height: 100%;
}
li {
list-style: none;
}
.item {
position: absolute;
height: 100%;
width: 100%;
opacity: 0;
transition: 1s;
}
img {
width: 100%;
height: 100%;
}
.active {
opacity: 1;
}
.left-btn {
position: absolute;
font-size: 75px;
font-weight: 600;
cursor: pointer;
opacity: 0;
left: 0;
top: 50%;
margin-top: -38px;
}
.right-btn {
position: absolute;
font-size: 75px;
font-weight: 600;
right: 0;
opacity: 0;
cursor: pointer;
top: 50%;
margin-top: -38px;
}
.content:hover .right-btn {
opacity: 0.5;
}
.content:hover .left-btn {
opacity: 0.5;
}
#tip {
position: absolute;
bottom: 20px;
left: 50%;
/* border:1px solid red; */
transform: translateX(-50%);
display: flex;
}
.tip {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: grey;
margin: 0 5px 0 5px;
cursor: pointer;
}
.tomato {
background-color: tomato;
}
</style>
<script>
window.onload = function () {
var items = document.getElementsByClassName("item");
var tips = document.getElementsByClassName("tip");
var lbtn = document.getElementsByClassName("left-btn")[0];
var rbtn = document.getElementsByClassName("right-btn")[0];
var content = document.getElementsByClassName("content")[0];
var test = document.getElementsByClassName("right-btn");
console.log(test);
var index = 0;
var timer = null;
console.log(test);
// 清空class
function clear() {
for (let i = 0; i < items.length; i++) {
items[i].className = "item";
tips[i].className = "tip";
tips[i].setAttribute("num", i);
}
}
// 图片转换
function move() {
clear();
items[index].className = "item active";
tips[index].className = "tip tomato";
}
// 左键
lbtn.onclick = function () {
if (index > 0) {
index--;
}
else {
index = items.length - 1;
}
move();
}
// 右键
rbtn.onclick = function () {
index++;
index = index % items.length;
move();
}
//定时器
timer = setInterval(function () {
rbtn.onclick();
}, 2000);
content.onmouseover = function () {
clearInterval(timer);
}
content.onmouseleave = function () {
clearInterval(timer);
timer = setInterval(function () {
rbtn.onclick();
}, 2000);
}
for (let i = 0; i < tips.length; i++) {
tips[i].addEventListener("click", function () {
var number = this.getAttribute("num");
index = number;
move();
})
}
}
// function count() {
// var arr = [];
// for (var i = 1; i <= 3; i++) {
// arr.push(function () {
// return i * i;
// });
// }
// return arr;
// }
// var results = count();
// var f1 = results[0];
// var f2 = results[1];
// var f3 = results[2];
// console.log(f1());
// console.log(f2());
// console.log(f3());
// var myname = "极客时间"
// function showName() {
// console.log(myname);
// if (0) {
// var myname = "极客邦"
// }
// console.log(myname);
// }
// showName()
// function foo() {
// for (var j = 0; j < 7; j++) {
// }
// console.log(j);
// }
// foo()
function foo(a) {
console.log(a);
if (2 === 2) {
var a = 'hello 小马哥';
}
}
var a = 10;
foo(a);
</script>
</head>
<body>
<div class="lunbo">
<div class="content">
<ul id="item">
<li class="item active">
<!-- #代表当前页面 -->
<a herf="#"><img src="叉号.png"> </a>
</li>
<li class="item">
<!-- #代表当前页面 -->
<a herf="#"><img src="电,闪电,电力,电量.png"> </a>
</li>
<li class="item">
<!-- #代表当前页面 -->
<a herf="#"><img src="狗头.png"> </a>
</li>
<li class="item">
<!-- #代表当前页面 -->
<a herf="#"><img src="京东2.png"> </a>
</li>
<li class="item">
<!-- #代表当前页面 -->
<a herf="#"><img src="眼睛_显示.png"> </a>
</li>
</ul>
<div class="left-btn">
< </div>
<div class="right-btn"> > </div>
<ul id="tip">
<li class="tip tomato"></li>
<li class="tip"></li>
<li class="tip"></li>
<li class="tip"></li>
<li class="tip"></li>
</ul>
</div>
</div>
</body>
</html>
