需求及实现原理
1、鼠标不在图片上方时,进行自动轮播,并且左右箭头不显示
鼠标放在图片上方时,停止轮播,并且左右箭头显示
2、图片切换后,图片下方的小圆点会同时切换,并且点击相应的小圆点可以切换到对应图片
3、点击左右箭头可以切换图片
4、图片上有介绍文字,会随图片切换进行切换
实现原理
1、将图片用数组装在一起,利用定时器定时改变图片数组的下标实现自动轮播
2、利用css的hover属性改变鼠标进出左右箭头的不同样式
3、利用鼠标移进事件停止计时器让轮播停止
4、通过给小圆点,文字描述,图片三个数组设置同一个下标让文、画、圆同步
5、为左右箭头和小圆点添加鼠标点击事件实现切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 800px;
height: 500px;
margin:0 auto;
position: relative;
}
#picture{
width: 800px;
height: 500px;
}
#left{
width: 50px;
height: 30px;
position: absolute;
top: 235px;
left: 0;
background-color: rgba(51, 49, 49,0.2);
color: white;
font-size: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
display: none;
}
#right{
width: 50px;
height: 30px;
position: absolute;
top: 235px;
right: 0;
background-color: rgba(51, 49, 49,0.2);
color: white;
font-size: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
display: none;
}
/*鼠标移入左右箭头的样式*/
#left:hover{
background-color: rgba(51, 49, 49,0.7);
}
#right:hover{
background-color: rgba(51, 49, 49,0.7);
}
/*鼠标移入大盒子时箭头出现*/
#box:hover #left{
display: block;
}
#box:hover #right{
display: block;
}
#cir{
width: 760px;
display:flex;
justify-content:center;
position: absolute;
bottom: 10px;
list-style:none;
}
#cir li{
width: 20px;
height: 20px;
border-radius:100% ;
border: 2px solid #ffffff;
margin:0 20px 0 20px ;
font-size: 40px;
}
/*鼠标移入圆内变色*/
#cir li:hover{
background-color: #ffffff;
}
.active{
background-color: #ffffff;
}
#text{
width: 50px;
position: absolute;
bottom: 233px;
left: 375px;
background-color: transparent;
text-align: center;
line-height: 20px;
font-size: 16px;
font-weight: 700;
}
</style>
</head>
<body>
<div id="box">
<img id="picture" src="./JS学习/img/u=484445536,1036788824&fm=253&fmt=auto&app=120&f=JPEG.webp">
<div id="left"><</div>
<div id="right">></div>
<ul id="cir">
<li class="active" data-current="0"></li>
<li data-current="1"></li>
<li data-current="2"></li>
<li data-current="3"></li>
<li data-current="4"></li>
</ul>
<span id="text"></span>
</div>
<script>
//将元素引入到js中
var box =document.getElementById('box');
var img =document.getElementById('picture');
var left =document.getElementById('left');
var right =document.getElementById('right');
var sli=document.getElementsByTagName("li")
//用一个数组将图片,文字描述装起来
var arr_picture=[`./JS学习/img/tnevpul5jwctnevpul5jwc.jpg`,
`./JS学习/img/u=1845556535,2973910963&fm=253&fmt=auto&app=138&f=JPEG.webp`,
`./JS学习/img/u=3171247351,649605450&fm=253&fmt=auto&app=138&f=JPEG.webp`,
`./JS学习/img/u=3863213318,1193449984&fm=253&fmt=auto&app=138&f=JPEG.webp`,
`./JS学习/img/u=484445536,1036788824&fm=253&fmt=auto&app=120&f=JPEG.webp`]
var arr_text=[`风景1`,`风景2`,`风景3`,`风景4`,`风景5`]
var current =1;
//设置定时器到点时图片,文字描述,圆点自动转换
function slide(){
img.src = arr_picture[current]
text.innerText =arr_text[current]
current =++current%5
text.innerText =arr_text[current]
sli[current].className="active"
for(var i=0;i<5;i++){
if(i!=current){
sli[i].className=""
}
}
}
//定时器被赋予执行函数
var time=setInterval(slide,2000)
//鼠标移入大盒子,定时器停止作用
box.addEventListener('mouseover',function(){
clearInterval(time);
});
//鼠标离开后,继续轮播
box.addEventListener('mouseout',function(){
time=setInterval(slide,2000);
})
//左右箭头点击事件
left.onclick=function(){
if(current<=0){
current =Math.abs((--current%5)+5)
}else{
current =--current%5
}
img.src = arr_picture[current]
text.innerText=arr_text[current]
sli[current].className="active"
for(var i=0;i<5;i++){
if(i!=current){
sli[i].className=""
}
}
}
right.onclick=function(){
current =++current%5
img.src = arr_picture[current]
text.innerText=arr_text[current]
sli[current].className="active"
for(var i=0;i<5;i++){
if(i!=current){
sli[i].className=""
}
}
}
//圆点点击事件
for(var i=0;i<5;i++){
sli[i].addEventListener("click",function(){
var cir_current=this.getAttribute("data-current")
current=cir_current
img.src = arr_picture[current]
text.innerText =arr_text[current]
sli[current].className="active"
for(var i=0;i<5;i++){
if(i!=current){
sli[i].className=""
}
}
})
}
</script>
</body>
</html>
QQ录屏20230111185224