组件功能 实现无缝循环轮播 实现组件自适应布局,以设计稿的宽度和网站主要的内容宽度为准 实现初始化自动滚动时下一张图片必须加载出来或者加载失败才会滚动 实现图片自动最大化并居中功能 API BannerSlider 参数 说明 是否必须 类型 默认值 sliderConfig 轮播配置参数 是 object 无 silderItems 图片参数 是 object or array 无 bannerClick banner点击回调,可以在这里统一跳转 否 function(image) 无 BannerSlider.sliderConfig 参数 说明 是否必须 类型 默认值 autoPlay 自动滑动时间,单位:毫秒 否 number 3000 width 盒子长度,因为单位为rem,所以 值=宽度/100 是 number 无 height 盒子高度,因为单位为rem,所以 值=高度/100 是 number 无 designWidth 设计稿宽度 否 number 750 maxWidth 网站主要内容最大宽度 否 number 750 optionShow 指示点展示控制,默认不显示 否 boolean false autoLocation 点击是否自动跳转链接 否 boolean false BannerSlider.silderItemsArray<String> 数组成员为图片链接 BannerSlider.silderItemsArray<Object> 参数 说明 是否必须 类型 默认值 imgUrl 图片链接 是 string 无 url 点击跳转链接 否 string 无 以上图片参数字段是组件用到的,也可以传入其他参数,通过bannerClick函数返回,或者在bannerClick函数做跳转 相关 核心组件:BannerSlider.vue 图片自动最大化并居中指令:imgAutoShow.js 项目安装 npm install 本地调试 npm run serve