素材巴巴 > 程序开发 >

js实现轮播图组件-显隐切换

程序开发 2023-09-12 14:29:40

摘要

面试时，面试官要求设计并实现一个图片轮播 Carousel 组件 说出html/css/js的设计思路
要求有自动切换、手动切换上一个面板、下一个面板、指示器提示和点击切换、渐隐切换效果
当时回答用定时器、css过渡实现，面试完自己上手写了些，做了一些优化，也学到了很多。

样式

请添加图片描述

（注：图片来源自网络，仅做学习用，侵删）

demo功能

设计一个轮换图组件。过渡效果为显示隐藏。
要有底下控制条与左右前进回退按键。本demo控制按键仅在moveover时显示。

主要实现方式

实现轮播图并不复杂，显隐效果控制opacity，移动效果可以以移动的方式实现。但是如何设计组件的结构与功能是很重要的。本demo的html结构参考自swiper组件。


                   标签：

                        

                            上一篇：
                             WebAssembly，web技术的再一次革新
                                                        下一篇：
                                                    

                        

                            
相关文章

                            
    
                    			无相关信息
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号：备案中。