原生js还原B站轮播图

最新推荐文章于 2023-07-03 21:04:34 发布

萧徵心

最新推荐文章于 2023-07-03 21:04:34 发布

阅读量468

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_44953009/article/details/106192560

版权

本文介绍了如何使用原生JS实现B站风格的轮播图，包括动态生成导航按钮、无缝切换、自动轮播等功能，并提供详细的HTML、CSS和JS代码示例。同时，文章讨论了在实现过程中遇到的bug及其修复方法。

摘要由CSDN通过智能技术生成

b站是用translate3d + opacity写的, 而这个用的position

效果图

在这里插入图片描述

需求

1 动态生成导航按钮
2 点击按钮切换图片
3 上一张下一张点击切换(模拟点击)
4 无缝轮播
5 自动轮播(模拟点击)
6 鼠标hover事件交互
7 bug修复

html

 <div class="box">
        <ul class="photos-con">
            <li><a href="javascript:;"><img src="images/img-1.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-2.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-3.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-4.jpg" alt=""></a></li>
            <li><a href="javascript:;"><img src="images/img-5.jpg" alt=""></a>