小白学习路之js实现图片轮播切换效果

最新推荐文章于 2023-12-17 19:39:00 发布

wy__kobe

最新推荐文章于 2023-12-17 19:39:00 发布

阅读量505

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wy__kobe/article/details/82966859

版权

本文记录了在B站学习中用原生js实现的图片轮播切换效果。实战内容包括自动轮播、按键切换图片、点击圆点切换及菜单子内容显示等功能。主要涉及HTML页面布局和js事件绑定。

摘要由CSDN通过智能技术生成

最近在b站上学习的时候，学到了一个用原生js实现图片轮播切换效果的实战，码下来收藏，嘻嘻嘻~
图片轮播效果图解析
上图是这个小实战的效果图，整个小实战所实现的功能是图片自动轮播切换、点击上下键图片切换上下图片、点击右下角圆点切换相应图片、点击主菜单显示相应子菜单内容。

html页面布局

<body>
	<!--主区域，存放所有需要元素-->
	<div id="main" class="main">
		<!-- 导航菜单 -->
		<div class="menu-box"></div>
		<!-- 子菜单 -->
		<div class="sub-menu hidden" id="sub-menu"></div>
		<!-- 主菜单 -->
		<div id="menu-content" class="menu-content">
			<div class="menu-item">
				<a href="#">
					<span>item</span>
					<i>&#xe666;</i>
				</a>
			</div>
			<div class="menu-item">
				<a href</