JavaScript基础之轮播图（无框架）

最新推荐文章于 2024-04-27 09:07:55 发布

千帆＆少年

最新推荐文章于 2024-04-27 09:07:55 发布

阅读量383

点赞数

分类专栏：笔记文章标签： css js html

本文链接：https://blog.csdn.net/djh8824/article/details/105216401

版权

本文介绍了如何在不依赖框架的情况下使用JavaScript和CSS创建轮播图。首先分析了轮播图的UI设计，通过HTML搭建轮播图的基本结构，接着讨论了CSS布局的关键点，并在JavaScript部分讲解了实现轮播功能的原理，包括图片切换动画和导航按钮的交互逻辑。

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

各位正在学习前端的道友们，你们好。鄙人也是刚学习前端一个月，写的第一篇博客可能有错误，感谢提出意见，谢谢大家！
轮播图作为众多网站的必备动画内容，所以对一个前端工程师来说，掌握轮播图的制作尤为重要。下面就是我所理解的轮播图制作方法，没有使用任何框架（当然，使用框架ui设计将变得很简单），主要目的是提高自己对CSS和JavaScript的掌握。

轮播图UI分析

在这里插入图片描述
在网页设计中，UI设计完成就等于成功的一半。分析轮播图UI组成，要有容放图片的框div,轮播图一般为一组图片，故应将其放入一无序列表ul，另外轮播图还有一个重要元素，就是底部的导航框，我们用一组超链接实现功能。HTML代码如下：

	<body>
		<div id="outer">
			<ul id="list">
				<li><img src="img/lp1.jpg" alt="图片"></li>
				<li><img src="img/lp2.jpg" alt="图片"></li>
				<li><img src="img/lp3.jpg" alt="图片"></li>
				<li><img src="img/lp4.jpg" alt="图片"></li>
				<li><img src="img/lp5.jpg" alt="图片"></li>
				<li><img src="img/lp1.jpg" alt="图片"></li>
			</ul>
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>