原生 js 轮播图 (焦点图轮播)
原生 js 轮播图 (焦点图轮播)
原生 js 轮播图 (焦点图轮播)
废话不多说,
直接上代码,
可以直接拿来用,改img_src 数据就行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
#container {
position: relative;
width: 70%;
text-align: center;
margin: 0 auto;
}
#main {
margin: 20px;
position: relative;
}
#main img {
width: 90%;
position: absolute;
left: 50%;
margin-left: -45%;
top: 0;
}
#next {
float: right;
}
#next,
#prev {
width: 200px;
height: 200px;
border-radius: 50%;
border: none;
}
#prev {
float: left;
}
ul {
list-style: none;
position: absolute;
top: 330px;
right: 200px;
}
ul li {
width: 10px;
height: 10px;
background-color: #fff;
border-radius: 50%;
margin: 0 10px;
display: inline-block;
cursor: pointer;
}
li.active {
background-color: #008B4A;
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<img>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<button id="next">下一张</button>
<button id="prev">上一张</button>
<script type="text/javascript">
//获取元素
var btn_next = document.querySelector("#next");
var btn_prev = document.querySelector("#prev");
var main = document.querySelector("#main");
var img = document.querySelector("img");
var ul_li = document.querySelectorAll("ul li");
var img_src = [
"100ccd8be5b6a85a81759a6ad2953083.jpg",
"67c7222fbcf98db942718eaf29f32297.webp",
"7c2b5d308761d257483badf0bc4eca22.jpg",
"918820682e4a490221cfd92b24c14b86.webp"
]
//定义当前图片在第几个
var index_img = 0;
function change() {
img.setAttribute("src", `${img_src[index_img]}`);
li_yuan();
}
change();
//封装小圆点
function li_yuan() {
ul_li.forEach(function(item, index) {
item.addEventListener("click", function() {
clearInterval(time1);
index_img = index;
change();
//点击小圆点 1秒 后重新开启定时器
setTimeout(settime(), 1000);
});
//把所有li标签的class去掉
item.classList.remove("active");
})
//给当前的设置为active
ul_li[index_img].classList.add("active");
}
var time1 = 0;
//定时器控制自动轮播
//封装成一个函数,以便于多次调用
function settime() {
time1 = setInterval(function() {
auto();
}, 3000);
}
settime();
//自动轮播函数
function auto() {
if (index_img == img_src.length - 1) {
index_img = 0;
} else {
index_img++;
}
change();
}
//点击下一张
btn_next.onclick = function() {
clearInterval(time1);
auto();
settime();
}
//点击上一张
btn_prev.onclick = function() {
clearInterval(time1);
if (index_img == 0) {
index_img = img_src.length - 1;
} else {
index_img--;
}
change();
settime();
}
//鼠标放在img上清除定时器
img.addEventListener("mouseover", function() {
clearInterval(time1);
})
img.addEventListener("mouseout", function() {
settime();
})
</script>
</body>
</html>