-----20220514
前端作业
需求部分
我们要求将html，css，js进行结合
实现图片自动切换，具有淡出显示，淡出消失的功能，并且可以通过左右标签或左下角的圆圈来进行一个图片的转换
效果图
轮播图实现效果
js代码解释
首先通过getElementsByClassName的方法， 将文档中所有指定类名的元素集合作为 NodeList 对象。然后通过getElementByID，返回对拥有指定 ID 的第一个对象的引用，就这样引用左右标签。
之后通过清除class，为我们定义的参数items，circles加指定的属性，并为其赋指定的值
开始定时器的方法为摁右边的按钮，其他的部分代码上有注释，较为清楚
源码部分
js部分
window.onload=function(){
var items=document.getElementsByClassName("item");
//getElementsByClassName() 方法返回文档中所有指定类名的元素集合
//作为 NodeList 对象。
//NodeList 对象代表一个有顺序的节点列表。NodeList 对象
//我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始)。
var circles=document.getElementsByClassName("circle");
var leftBtn=document.getElementById("btn-left");
//可返回对拥有指定 ID 的第一个对象的引用。
var rightBtn=document.getElementById("btn-right");
var content=document.querySelector('.contect');
//querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
var index=0;
var timer=null;
//清除class
var clearclass=function(){
for(let i=0;i<items.length;i++){
items[i].className="item";
circles[i].className="circle";
circles[i].setAttribute("num",i);
//添加指定的属性，并为其赋指定的值
}
}
/*只显示一个class*/
function move(){
clearclass();
items[index].className="item active";
circles[index].className="circle white";
}
//点击右边按钮切换下一张图片
rightBtn.onclick=function(){
if(index<items.length-1){
index++;
}
else{
index=0;
}
move();
}
//点击左边按钮切换上一张图片
leftBtn.onclick=function(){
if(index<items.length){
index--;
}
else{
index=items.length-1;
}
move();
}
//开始定时器，点击右边按钮，实现轮播
timer=setInterval(function(){
rightBtn.onclick();
},3000)
//点击圆点时，跳转到对应图片
for(var i=0;i<circles.length;i++){
circles[i].addEventListener("click",function(){
var point_index=this.getAttribute("num");
index=point_index;
move();
})
}
//鼠标移入清除定时器，并开启一个定时器，使慢慢转动
content.onmouseover=function(){
clearInterval(timer);
//clearInterval() 方法可取消由 setInterval() 设置的 timeout。
//clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
timer=setInterval(function(){
rightBtn.onclick();
},60000)
}
//鼠标移出又开启定时器
content.onmouseleave=function(){
clearInterval(timer);
timer=setInterval(function(){
rightBtn.onclick();
},3000)
}
}
css部分
*{
margin: 0;
padding: 0;
}
body{
color: rgb(103, 57, 41);
}
.container{
width: 1010px;
margin: 0 auto;
background-color: #aaa;
}
.header{
width: 1000px;
height: 250px;
margin: 5px;
background-color: #123;
position: relative;
}
#item.a{
list-style: none;
}
#item.li{
list-style: none;
}
#item{
width: 100%;
height: 100%;
}
.item{
position: absolute;
opacity: 0;
transition: all 1s;
}
.item.active{
opacity:1;
}
img{
width: 950px;
height: 250px;
}
#btn-left{
width: 30px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left:5px;
z-index: 10;/*始终显示在图片的上层*/
position: absolute;
left: 0;
top: 50%;
transform: translateY(-60%);/*使按钮向上偏移居中对齐*/
cursor: pointer;
opacity: 0;/*平时隐藏*/
}
.container:hover #btn-left{
/*鼠标滑入，显示图标*/
opacity: 1;
}
#btn-right{
width: 26px;
height: 69px;
font-size: 30px;
color: white;
background-color:rgba(0,0,0,0.4);
line-height: 69px;
padding-left: 5px;
z-index: 10;
position: absolute;
right: 0;
top: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(-60%);
}
.container:hover #btn-right{
opacity: 1;
}
#circle{
height: 20px;
display: flex;
position: absolute;
bottom: 35px;
right: 25px;
}
.circle{
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid white;
background: rgba(0,0,0,0.4);
cursor: pointer;
margin: 5px;
}
.white{
background-color: #FFFFFF;
}
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>咖啡店</title>
<link rel="stylesheet" href="caffe.css">
<script src="caffe.js"></script>
</head>
<body>
<div class="container">
<!-- 头部 -->
<div class="header">
<ul id="item">
<li class="item">
<a href="#"><img src="banner.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="banner1.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="banner2.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="banner3.jpg" ></a>
</li>
<li class="item">
<a href="#"><img src="banner4.jpg" ></a>
</li>
</ul>
<div id="btn-left"><</div>
<div id="btn-right">></div>
<ul id="circle">
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
<li class="circle"></li>
</ul>
</div>
</body>
</html>
