本文介绍如何使用jQuery创建轮播图效果。内容包括HTML布局、CSS样式设计以及jQuery代码实现，涉及点击切换、自动播放及方向图标等功能。
今天我和大家分享一下轮播图的实现，下面是我做的轮播图效果案例，如下图所示：
首先我们看到，它是由背景图片、方向图标和指示器组成。我们发现背景图片、方向图标和指示器是层叠在一起的，所以布局时我们要用绝对定位。我们要实现点击方向图标时，图片跟着变换；点击指示器时，图片跟着变换；不点击时每隔5秒自动播放；不点击时不显示方向图标。
一，先写HTML布局代码
结构布局：一个大的div，里面包含一个Img图片标签，显示背景图片部分，还有一个div，显示方向图标部分。
<body>
<div id="conest">
<img src="img/h1.jpg" id="pic" />
<div id="text">
<input type="button" id="shang" value="上一张" />
<input type="button" id="xia" value="下一张" />
</div>
</div>
</body>二，再写CSS样式代码
最低0.47元/天 解锁文章
扫一扫
1151
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
