网页轮播图
轮播图也称为焦点图,是网页中比较常见的网页特效
功能需求:
1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮
2.点击右侧按钮一次,图片往左播放一张,以此类推,左侧同理
3.图片播放的同时,下面的小圆圈模块跟随一起变化
4.点击小圆圈,可以播放相应的图片
5.鼠标不经过轮播图,轮播图也会自动播放图片
6.鼠标经过,轮播图模块,自动停止播放
HTML主要布局部分:
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> </a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
</div>