案例：轮播图

最新推荐文章于 2023-08-07 16:12:45 发布

原创最新推荐文章于 2023-08-07 16:12:45 发布 · 265 阅读

本内容遵循CC 4.0 BY-SA版权协议

该代码示例展示了如何使用HTML、CSS和JavaScript实现一个具有自动轮播、鼠标悬停停止轮播、左右箭头切换、小圆点导航和文字描述切换功能的图片轮播组件。通过定时器和事件监听来控制图片和相关元素的状态变化。

需求及实现原理
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

标签

#css #css3 #html