%20(2).svg)
项目简介
这是一个基于JavaScript的简易轮播图插件项目，目标是为网页提供便捷、快速的图片轮播效果展示方式。项目采用ES6语法，并通过Babel进行语言降级，保证在各类浏览器中的兼容性。
项目的主要特性和功能
- 简单易用：引入
slideshow.js文件，就能在页面实现轮播图功能。 - 灵活配置：提供轮播方向、轮播时间、按钮样式等多种配置项，满足不同需求。
- 字体图标：运用icomoon字体图标，提供左右箭头按钮。
安装使用步骤
假设用户已经下载了本项目的源码文件。
1. 引入文件：在HTML文件中引入slideshow.js文件。
```html
2. **样式设置**：按照项目提供的CSS样式，设置轮播图的HTML元素的样式。css
/ 父元素样式 /
#slideshow {
height: 400px;
width: 600px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
/ ul样式 / ul li { list-style: none; }
.cx-slideshow { height: 100%; position: absolute; top: 0; left: 0; }
.cx-slideshow li { height: 100%; float: left; }
.cx-slideshow li a > img { height: 100%; width: 100%; }
.cx-slideshow li a { display: block; }
.cx-btn { position: absolute; top: 50%; transform: translateY(-50%); }
.cx-btn > span:first-of-type { float: left; }
.cx-btn > span:last-of-type { float: right; }
/ 字体图标样式 / @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?hd8xq4'); src: url('fonts/icomoon.eot?hd8xq4#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?hd8xq4') format('truetype'), url('fonts/icomoon.woff?hd8xq4') format('woff'), url('fonts/icomoon.svg?hd8xq4#icomoon') format('svg'); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.icon-arrow-right:before { content: "\ea34"; }
.icon-arrow-left:before {
content: "\ea38";
}
3. **配置轮播图**：在JavaScript中，使用`Slide`构造函数来配置轮播图，包括图片路径、轮播方向、轮播时间等。js
let slide1 = new Slide({
id: 'slideshow',
srcArr: [],
direction: 'left/right',
hrefArr: [],
time: 2500,
btnHeight: 80,
btnWidth: 80,
btnSize: 30,
btnColor: 'white',
btnBgcolor: 'rgba(1,1,1,.7)'
});
```
4. 运行测试：在浏览器中打开HTML文件，查看轮播图效果。
注意：项目中使用的字体图标需要从提供的链接（https://icomoon.io）下载，并将字体文件放在与HTML文件同级的目录下。在CSS中引入字体图标样式时，需确保路径正确。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】