前端学习（1）-轮播图

最新推荐文章于 2024-09-22 22:49:42 发布

世界joker

最新推荐文章于 2024-09-22 22:49:42 发布

阅读量1.7k

点赞数 2

分类专栏：前端文章标签：前端 HTML CSS JavaScript

本文链接：https://blog.csdn.net/wangli1281/article/details/83417488

版权

本文是前端学习的第一篇，作者从后台转战前端，通过复习CSS、HTML和JavaScript，动手制作轮播图。文章分为三个部分，首先介绍背景，然后详细讲解如何使用HTML构建轮播图框架，接着是CSS样式设计，特别是利用transition实现动画效果，最后是JavaScript部分，介绍了onmouseover、onmouseout和onclick等事件以及定时器的运用。

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

1.背景

写过一段时间的后台代码，总感觉自己做的界面有些难看。想尝试着写一些好看的界面。于是我从基本的css+html+javacript复习起来。尝试着做一个轮播图。

2.第一部分

用HTML写一个主体的框架。首先用ul列表来存放图片和描述。接着写一个div用来标识页码，最后写一对按钮组，实现点击后，进入下一个图片。

<div class="slideShow">
	<ul>	
		<li>
			<h2 class="active">桥边落日</h2>
			<img class="active" src="images/h1.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>夕阳美图</h2>
			<img src="images/h2.jpg" width="720px" height="540px" >
		</li>
		<li>
			<h2>湖光波澜</h2>
			<img src="images/h3.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>长河落日</h2>
			<img src="images/h4.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>黄昏</h2>
			<img src="images/h5.jpg" width="720px" height="540px">
		</li>
		<li>
			<h2>松</h2>
			<img src="images/h6.jpg" width="720px" height="540px">
		</li>
	</ul>
	<

最低0.47元/天解锁文章