js 实现轮播图

最新推荐文章于 2024-05-30 13:59:14 发布

起啥名呢？？？

最新推荐文章于 2024-05-30 13:59:14 发布

阅读量193

点赞数 1

分类专栏： # Web前端案例文章标签： javascript

本文链接：https://blog.csdn.net/PSG_li/article/details/130853990

版权

Web前端案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

效果

描述

使用 JavaScript 实现轮播图效果：

自动轮播：每隔 2s，自动切换图片
鼠标进入轮播图区域，暂停自动轮播（一直显示当前图片）
鼠标离开轮播图区域，继续自动轮播
点击轮播图区域右下角轮播控件，切换为对应图片

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>轮播图</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			html {
				font-size: 62.5%;
			}
			
			.carousel-bar {
				width: 48rem;
				height: 27rem;
				border: 1px solid #676767;
				margin: 3rem auto;
				position: relative;
			}
			
			.carousel-image-list {
				width: 100%;
				height: 100%;
				display: flex;
				overflow: hidden;
			}
			
			.carousel-image {
				width: 48rem;
				height: 27rem;
			}
			
			.carousel-control-list {
				display: flex;
				position: absolute;
				bottom: 1rem;
				right: 1.2rem;
			}
			
			.carousel-control {
				font-size: 1.5rem;
				color: #fff;
				background-color: rgba(0, 0, 0, 0.5);
				margin: 0 0.2rem;
				padding: 0.2rem 0.7rem;
				border-radius: 0.2rem;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="carousel-bar">			
			<div class="carousel-image-list">
				<div><img src="./img/487211.jpg" alt="" class="carousel-image"></div>
				<div><img src="./img/520426.jpg" alt="" class="carousel-image"></div>
				<div><img src="./img/580153.jpg" alt="" class="carousel-image"></div>
				<div><img src="./img/692649.jpg" alt="" class="carousel-image"></div>
				<div><img src="./img/837663.jpg" alt="" class="carousel-image"></div>
			</div>
			
			<div class="carousel-control-list">
				<div class="carousel-control">1</div>
				<div class="carousel-control">2</div>
				<div class="carousel-control">3</div>
				<div class="carousel-control">4</div>
				<div class="carousel-control">5</div>
			</div>
		</div>
		
		<script>
			let carouselBar = document.getElementsByClassName("carousel-bar")[0];
			let imageList = document.getElementsByClassName("carousel-image-list")[0];
			let image = document.getElementsByClassName("carousel-image");
			let control = document.getElementsByClassName("carousel-control");
			
			let imageIndex = 0;
			
			/**
			 * @description 显示指定的图片
			 * @param {Number} index 要显示的图片的索引
			 */
			function showImage(index) {
				imageIndex = index;
				
				/* 显示第 index 张图片（将图片列表水平向左滚动） */
				imageList.scrollLeft = imageList.offsetWidth * index;
				
				/* 为控件添加样式 */
				for(let i=0; i<control.length; i++){
					if(i == index){
						/* 为当前控件添加样式 */
						control[i].style.boxShadow = "0 0 0 0.1rem #f00";
					}else{
						/* 将其它控件恢复为默认样式 */
						control[i].style.boxShadow = "0 0 0 0 #f00";
					}
				}
			}
			
			/* 页面默认显示第一张图片 */
			showImage(0);
			
			/* 手动轮播，点击轮播控件中的不同数字，切换为对应的图片 */
			for(let i=0; i<control.length; i++){
				control[i].onclick = function(){
					showImage(i);
				}
			}
			
			/* 自动轮播 */
			/**
			 * @description 播放下一张图片
			 */
			function autoPlay(){
				imageIndex++;
				
				/* 将最后一张图片的下一张图片设置为第一张图片 */
				if(imageIndex > image.length-1){
					imageIndex = 0;
				}
				
				showImage(imageIndex);
			}
			/* 周期性调用 autoPlay 函数，实现自动播放 */
			let interval = setInterval(autoPlay, 2000);
			
			/* 鼠标进入轮播图区域，暂停自动播放 */
			carouselBar.onmouseover = function(){
				clearInterval(interval);
			}
			
			/* 鼠标离开轮播图区域，继续自动播放 */
			carouselBar.onmouseout = function(){
				interval = setInterval(autoPlay, 2000);
			}
		</script>
	</body>
</html>