pc端轮播图 css、js

这是一个轮播图的效果。

 <div class="main">
            <div class="focus">
                <a href="javascript:;" class="arrow-l">
                    &lt;
                 </a>
                <!-- 右侧按钮 -->
                <a href="javascript:;" class="arrow-r"> &gt; </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.点击下面的圆点实现图片的切换