标签：function 轮播 img rgba javascript let key 图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>serInterval_轮播图</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#outer{
width: 100vw;
position: relative;
}
img{
width: 100%;
}
span{
position: absolute;
bottom: 50%;
color: #f00;
display: block;
font-size: 24px;
cursor: pointer;
z-index: 9;
}
.btn1{
left: 30px;
}
.btn2{
right: 30px;
}
#tag{
width: 140px;
height: 10px;
position: absolute;
left: 50%;
margin-left: -70px;
bottom: 20px;
display: flex;
/* flex-direction:column-reverse;/*改变方向 */
justify-content:space-between;
}
#tag i{
box-sizing: border-box;
width: 10px;
text-align: center;
border-radius: 10px;
cursor: pointer;
background-color: rgba(255,0,0,.2);
}
</style>
</head>
<body>
<div id="outer">
<img src="../DOM/img/01.png" >
<span class="btn1" id="btn1" type="button"><</span>
<span class="btn2" id="btn2" type="button">></span>
<div id="tag">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<script>
window.onload = function(){
let urls = [
"../DOM/img/01.png",
"../DOM/img/02.jpg",
"../DOM/img/03.png",
"../DOM/img/04.jpg",
"../DOM/img/05.jpg",
"../DOM/img/06.png",
];
let key = 0;
let btn1 = document.getElementById("btn1");
let btn2 = document.getElementById("btn2");
let img = document.getElementsByTagName("img")[0];
let tag = document.getElementById("tag");
let i = tag.getElementsByTagName("i");
let item = i[key].style.backgroundColor = "rgba(255,0,0,.8)";
//下一张
function next(){
if(key == urls.length - 1){
key = 0;
}else{
key++;
}
img.src = urls[key];
for(var k = 0 ; k < i.length ; k++){
if(k === key){
i[k].style.backgroundColor = "rgba(255,0,0, .8)";
}else{
i[k].style.backgroundColor = "rgba(255,0,0,.2)";
}
}
};
//上一张
function prev(){
if(key == 0){
key = urls.length - 1;
}else{
key--;
}
img.src = urls[key];
for(var k = 0 ; k < i.length ; k++){
if(k === key){
i[k].style.backgroundColor = "rgba(255,0,0,.8)";
}else{
i[k].style.backgroundColor = "rgba(255,0,0.2)";
}
}
};
//定时下一张
var timer = setInterval(()=>{next()},3000);
//上一张 点击暂停自动轮播
btn1.onclick = function(){
clearInterval(timer);
prev();
};
//鼠标移出开启自动轮播
btn1.onmouseout = function(){
timer = setInterval(()=>{next()},3000);
};
//下一张 点击暂停自动轮播
btn2.onclick = function(){
clearInterval(timer);
next();
};
//鼠标移出开启自动轮播
btn2.onmouseout = function(){
timer = setInterval(()=>{next()},3000);
};
}
</script>
</body>
</html>标签：function,轮播,img,rgba,javascript,let,key,图片 来源： https://blog.csdn.net/qq_35122887/article/details/119351910
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。