html css+js实现轮播图制作以及图片下方的文字描述部分一同轮播可自动切换手动切换

置顶

LL__Sunny

已于 2023-07-25 14:16:43 修改

阅读量1.3w

点赞数 19

CC 4.0 BY-SA版权

分类专栏： html 文章标签： css+js轮播图制作自动轮播手动轮播绝对定位相对定位

于 2019-12-04 13:23:37 首次发布

本文链接：https://blog.youkuaiyun.com/LL__Sunny/article/details/103384874

html css+js实现轮播图制作以及图片下方的文字描述部分一同轮播可自动切换手动切换

😊先看一下小sunny做的效果图吧ヾ(≧▽≦*)o

在这里插入图片描述

效果图是对5张图片进行轮播的，点击左右箭头可以实现手动切换

鼠标悬停在画面上时会停止轮播，离开后继续播放！

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>sunny的制作轮播图</title>
	<style>
		/*大盒子*/
		.box{
   
   
			width: 500px;
			height: 560px;
			background-color: pink;
			position: relative;
			margin-left: 20%;

		}
		/*图片大小*/
		img{
   
   
			width: 100%;
			height: 100%;
		}
		/*文本信息*/
		#text{
   
   
			width: 500px