js实现轮播图

最新推荐文章于 2023-11-11 10:19:25 发布

原创

最新推荐文章于 2023-11-11 10:19:25 发布 · 662 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css3

本文介绍如何用JavaScript、HTML和CSS3创建一个轮播图。内容包括轮播图的实现效果描述、主要思路、具体实现代码以及参考视频链接。通过图片索引管理显示状态，左右箭头和圆点点击切换，以及定时器自动轮播和鼠标悬停暂停功能。

js实现轮播图

实现效果

在这里插入图片描述
左右箭头可以进行换图，圆点显示当前图片，也可以进行切换，当鼠标移到图片上时，图片停止轮播，移触图片外时，继续轮播。这个轮播图是通过图片的切换进行轮播，不是滑动轮播！

大体思路

1、其中根据图片索引index来存放当前展示的照片，展示的照片属性为：将圆点dot的id名设为active和图片img的display设为block，其它没有展示的图片对应的圆点id为“”空，图片img的display:none；
2、左/右箭头切换图片，通过添加监听事件实现点击切换，其中通过将display:none来让图片消失，将要展示的图片为display:block来显示；
3、圆点索引，是通过设置id名为active的实现当前图片所在；实现的功能第一个是点击切换，也是添加监听事件，通过给每个圆点赋予一个data-id属性来存放图片对应索引，当点击时通过getAttribute(“data-id”)需要切换照片的索引，然后进行1的操作；
4、定时器实现每隔两秒进行切换照片；
5、通过添加监听事件"mouseover"、“mouseout”实现鼠标在图片上停止轮播，鼠标移开继续轮播；而停止轮播就清除定时器clearInterval()。

实现代码

index.html
我这里就直接放body里面的代码了

<body>
    <div class="box">
        <!-- 图片 -->
        <div class="boximg">
            <div class="boxcontent" id="boxcontent1"><img src="./imgs/1.jpg" alt=""></div>
            <div class="boxcontent" id="boxcontent2"><img src="./imgs/2.jpg" alt=""></div>
            <div class="boxcontent" id="boxcontent3"><img src="./imgs/3.jpg" alt=""></div>
        </div>
        <div class="boxpointer">
            <span id="left">&lt;</span>
            <span id="right">&g