一个用来轮播dom结构的原生js插件,不依赖jquery等类库。
npm install parse-to-slider
<!-- html file --><body><sectionid="carouselMap"><divclass="one"><!-- Anything you want to display~! --></div><divclass="two"><!-- Anything you want to display~! --></div>
...
</section></body>// js fileimportparseToSliderfrom'parse-to-slider';/** * @param {要转为轮播图的dom id} id * @param {轮播时间间隔,单位秒} interval * @param {是否需要左右箭头导航} ifArrow * @param {下方导航点的位置 left/center/right} position */parseToSlider('carouselMap',3,false,'center');/* css file */#carouselMap {
width:400px;
height:200px;
position: absolute; /* this is necessary */
}
.one, .two, .three, .four {
width:400px;
height:200px; }- 需要给外层包裹元素绝对定位。
- 轮播的内容由你定义,轮播的其实是包裹元素内的首层块级元素
简单的小页面,需要展示轮播结构的时候可以利用该插件快速开发。
ie8及ie8以上。(ie8与ie9滑动效果失效)
