Html+Css+Js轮播图实现

最新推荐文章于 2025-04-18 09:08:55 发布

04160708

最新推荐文章于 2025-04-18 09:08:55 发布

阅读量2.3k

点赞数 3

文章标签： javascript css html

本文链接：https://blog.youkuaiyun.com/qq_64450294/article/details/124806130

版权

本文介绍了两种实现轮播图的方法，一种是基础的图片更换方式，通过CSS相对定位和JavaScript定时器实现；另一种是更复杂的轮播结构，包含左右箭头控制和点状指示器，利用CSS过渡效果和JavaScript事件监听实现图片切换。详细展示了HTML、CSS和JavaScript代码，适用于前端开发者学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

轮播图目前所知方法有两种方式，前者为比较简单基础的轮播方式。

1.以图片更换形式实现简单的轮播

2. 较为复杂的方式实现轮播

1.以图片更换形式实现简单的轮播

首先轮播结构

<style>
    #box {
			position: relative;  /*相对定位*/
			margin: 100px auto;
			overflow: hidden;
			width: 520px;
			height: 280px;
			background-color: grey;
		}
	#box img {
			width: 100%;
			height: 100%;
		}
</style>
<body>
    <div id="box">
		<img id="lunbo_img" src="images/img1.jpg">
    </div>
</body>

不使用<img>也可以，直接设定box里面的背景图片也能达到相同的效果。

其次添加Js函数，添加定时器实现定时更换图片，以呈现轮播的形式。

下面是javascript代码实现

<script type="text/javascript">
		var index = 1;
		function lunbo(){
			index ++;
			if(index>5){
				index = 1;
			}
			var img = document.getElementById('lunbo_img');
			img.src = "images/img"+index+".jpg"
		}
		setInterval(lunbo,2000);
</script>

2. 较为复杂的方式实现轮播

首先是轮播结构，这种形式的轮播图大多都如此

<body>
	<div class="lunbo">
    	<div class="content">
    		<ul id="item">
    			<li class="item">
     			<a href="#" ><img src="images/img1.jpg" ></a>
    			</li>
    			<li class="item">
    			 <a href="#" ><img src="images/img2.jpg" ></a>
    			</li>
    			<li class="item">
    			 <a href="#" ><img src="images/img3.jpg" ></a>
    			</li>
    			<li class="item">
    			 <a href="#" ><img src="images/img4.jpg" ></a>
    			</li>
    			<li class="item">
    			 <a href="#" ><img src="images/img5.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>
  	</div>
</body>

再设置css style，调整好整体形式

<style type="text/css">
		*{
 			margin: 0;   /*消除body自身默认的边距*/
			padding: 0;
		}
		a{
		 list-style: none;
		}
		li{
		 list-style: none;
		}
		.lunbo{
			width: 100%;
			height: 300px;
			overflow: hidden;
		}
		.content{
			width: 800px;
			height: 300px;
			margin: 20px auto;
			position: relative;
		}
		#item{
		 	width: 100%;
		 	height: 100%;
		}
		.item{
		 	position: absolute;
		 	opacity: 0;     /*透明度*/
		 	transition: all 1s; 
		}
		.item.active{
		 	opacity:1;
		}
		img{
		 	width: 100%;
		}
		#btn-left{
		 	width: 30px;
		 	height: 69px;
		 	padding-left:5px;
		 	font-size: 30px;
		 	color: white;
		 	background-color:rgba(0,0,0,0.4);
		 	line-height: 69px;
		 	z-index: 999;
		 	position: absolute;
		 	left: 0;
		 	top: 50%;
		 	transform: translateY(-60%);
		 	opacity: 0;      /*平时隐藏*/
		}
		.lunbo:hover #btn-left{
		 	opacity: 1;		 /*鼠标滑入，显示图标*/
		}
		#btn-right{
		 	width: 26px;
		 	height: 69px;
		 	padding-left: 5px;
		 	font-size: 30px;
		 	color: white;
		 	background-color:rgba(0,0,0,0.4);
		 	line-height: 69px;
		 	z-index: 999;
		 	position: absolute;
		 	right: 0;
		 	top: 50%;
		 	opacity: 0;
		 	transform: translateY(-60%);
		}
		.lunbo:hover #btn-right{
		 	opacity: 1;
		}
		#circle{
		 	height: 20px;
		 	display: flex;
		 	position: absolute;
		 	bottom: 35px;
		 	right: 25px;
		}
		.circle{
			margin: 5px;
			width: 10px;
			height: 10px;
			border-radius: 10px;
			border: 2px solid white;
			background: rgba(0,0,0,0.4);
		}
		.white{
		 	background-color: #FFFFFF;
		}
	</style>

下面是js代码

<script type="text/javascript">
	window.onload=function(){
		var items=document.getElementsByClassName("item");
		var circles=document.getElementsByClassName("circle");
		var leftBtn=document.getElementById("btn-left");
		var rightBtn=document.getElementById("btn-right");
		var content=document.querySelector('.content');
		var index=0;
		var timer=null;
		var clearclass=function(){
		    for(let i=0;i<items.length;i++){
		      items[i].className="item";
		      circles[i].className="circle";
	          circles[i].setAttribute("num",i);
		 }
		}
		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();
		},1500)
		//点击圆点时，跳转到对应图片
		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);
		     timer=setInterval(function(){
		       rightBtn.onclick();
		      },3000)
		}
		//鼠标移出又开启定时器
		content.onmouseleave=function(){
		     clearInterval(timer);
		     timer=setInterval(function(){
		     rightBtn.onclick();
		     },1500)
		}
	}