目录
一、前言
说起轮播图,大家应该都不陌生,大部分网站的首页或者也是面试官的提问:你会写轮播图吗?都会见到它的存在。虽然实现起来也不是很困难,但是真正能写好的人也不多,这也是我写这个的原因,整理一下自己写的东西,也带着大家一起复习巩固。
二、轮播图实现效果
三、功能
1.实现自动播放
2.鼠标移入停止播放,按左右切换按钮或者点击分页器小圆点切换图片
3.图片实现淡入淡出的动画效果
四、实现代码
1.html+css部分代码
<div class="banner">
<!-- 图片部分 -->
<div class="wrap">
<div class="item">
<img src="./img/02.jpg" alt="">
</div>
<div class="item">
<img src="./img/01.gif" alt="">
</div>
<div class="item">
<img src="./img/03.jpg" alt="">
</div>
<div class="item">
<img src="./img/04.jpg" alt="">
</div>
</div>
<!-- 分页器部分 -->
<div class="pagenation">
<div id="pagenation-item0"></div>
<div id="pagenation-item1"></div>
<div id="pagenation-item2"></div>
<div id="pagenation-item3"></div>
</div>
<!-- 上一张下一张部分 -->
<div class="goon"></div>
<div class="goout"></div>
</div>