JS实现简单的轮播图

逃离我推掉我的手 2024-04-18 08:27 70阅读 0赞

JS实现简单的轮播图

# js用面向过程的方法实现简单的轮播图 #

先写好简单的html布局；  
正常轮播图所要实现的功能有一下几个：  
1.banner图的自动切换；  
2.通过左右按钮来切换banner图；  
3.通过banner图下方的小圆点来切换banner图；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70]  
然后在使用CSS对页面进行布局：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20190904002349259.png]  
css样式因为时间问题，写的可能有点繁琐，给为小伙伴在阅读或者使用的时候可以自己精简一下。

因为在日常网页中，banner图通常都是用来展示某些高热度东西，对网页开发方来说他们是更倾向于访问者可以通过banner图来了解banner图中所展示的东西，所以我们需要将banner图写在超链接中。  
因为本人是入门一个月，外加英语比较挫，所以ID名这些起的不是很好，初次写贴，请各位多多包涵。

## JS代码： ##

主要思路：

1.  先将HTML中的每个元素获取到JS中，有的元素是通过ID获取的，有的元素是通过元素名获取的，通过ID获取的元素可以对元素直接进行调用，通过元素名获取的元素，我们得到的值他是一个数组，我们要通过数组的下标对他进行访问；
2.  我自己是通过元素ID加元素名来获取的，轮播图的功能实现是通过不断的来操作数组的index来实现的。也是初次尝试些Markdown这样的东西，描述的可能不是很清楚，如果有像我一样的初学者，有疑惑的地方可以找本人探讨，如果有小伙伴发现该文档中的错误，也可以告诉本人，不胜感激。

下来先看代码：

天啦撸，才发现Markdown最常用的功能，原来可以直接放代码块，此处有一个贱贱的表情无法导入，原谅我是一个刚入门一个月的小白吧，嘿嘿。

js刚开始的function ById()是为了方便期间，将获取HTML元素的方法封装在一个函数里，这样每次在获取HTML元素的时候可以直接拿来调用，很方便；

function changeImg() {
            for(let i=0;i<oBn.length;i++){
                oBn[i].className="";
                oBn[i].style.display="none";
                oSp[i].className='';
            }
            oBn[index].style.display="block";
            oSp[index].className="active";
        }
        因为要根据index来控制div的显示和隐藏的以及小圆点的颜色的，所以先通过遍历将div的所有类名的清空，当后面用到某种时间时，在给某个div给一个oBn[index].style.display="block"样式来显示该图片。
        后面就不一一分析了。

马上凌晨一点了，就不写下去了，明天还要上课，如果明天有时间，我会把用面向对象的方法来实现轮播图的方法也写在下面，有需要的小伙伴可以看一看。我也是一个刚入门一个月的小白，如果有那位小伙伴发现代码的问题或者别的问题，可以给我指出，万分感谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3b05ffb0f9734dbf946a6a76d0238243.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6f099f45ff8c46c6978212edcba1d9c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FzYzE5OTcxMDIy_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/57781854c59f4e059a5db73cbef3b016.png
[20190904002349259.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/afb832a1bcd24ea5b45a27d1e6682a60.png