这是一个轮播图的效果。
<div class="main">
<div class="focus">
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> > </a>
<ul>
<li><img src="upload/focus.png" alt=""></li>
<li><img src="./upload/focus1.jpg" alt=""></li>
<li><img src="./upload/focus2.jpg" alt=""></li>
<li><img src="./upload/focus3.jpg" alt=""></li>
</ul>
<ol class="circle">
</ol>
</div>
这是基本的htm框架,如果只是想做一个轮播图的效果。只需要一个大盒子然后需要将轮播的图片放到ul里面。然后就是左右箭头,还有下面的圆点。这都不是重点。大家应该都会,下面是js代码。原生js写的。
在我们写之前我们需要知道,这个轮播图我们要实现几个功能。
1.鼠标放在轮播图上左右箭头显示,不放上去就不显示。
2.点击下面的圆点实现图片的切换