轮播图的实现代码
<!DOCTYPE html><html><head><title>轮播图的实现</title><style>* {padding: 0;margin: 0;}.lunbo {width: 600px;height: 500px...
·
<!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();
})
}
}
</script>
</head>
<body>
<div class="lunbo">
<div class="content">
<ul id="item">
<li class="item active">
<!-- #代表当前页面 -->
<a herf="#"><img src="叉号.png"> </a>//src后面跟的是图片地址,使用代码时自行更换
</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>
代码实现效果如下图:
点击页面图片开始自行循环滚动,当鼠标移入红色框内,图片停止滚动,红色框两边出现左右按钮。点击左右按钮可以实现切换上一张和下一张图片,或者直接点击下方小圆点,可以跳转到指定的图片,当鼠标移出时,图片将继续进行循环滚动。
更多推荐
已为社区贡献1条内容
所有评论(0)