前端开发 — 轮播图的简单制作
下面简单的介绍轮播图的简单制作
搭建结构
给结构写好相应的样式
通过javascript制作动画
一：搭建结构
- 在结构的搭建中，使用到了两个盒子，两个盒子的大小一样，一个用来显示轮廓，一个用来显示ul中的图片，screen中放ul和五个li，在li中放img用来显示图片。
- 虽然小圆点的样式需要后来添加，但是需要先给小圆点写上样式。所以，我们应该先写上小圆点的结构，在小圆点的样式写好之后，再删除小圆点的结构，这样一来，当需要有多少张图片显示，就会添加多少个小圆点，使用javascript动态来添加小圆点的个数。
<body>
<!--all用来做边框-->
<div class="all" id="all">
<!--screen用来展示图片-->
<div class="screen">
<!--这里的ul要比较大,用来放置li,由于li中的都是图片,所以需要很宽来放置图片-->
<ul id="pic">
<li><img src="images/taobao/1.jpg" alt=""></li>
<li><img src="images/taobao/2.jpg" alt=""></li>
<li><img src="images/taobao/3.jpg" alt=""></li>
<li><img src="images/taobao/4.jpg" alt=""></li>
<li><img src="images/taobao/5.jpg" alt=""></li>
</ul>
</div>
<!--将ol放置在all这个大盒子里面-->
<!--<ol id="circle">-->
最低0.47元/天 解锁文章
2893
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
