html 轮播_jQuery叠化效果轮播图制作

jQuery实现叠化效果图片轮播（自动和手动）

本次轮播效果图如下：

具有以下功能：1.自动播放 2.左右箭头切换 3.鼠标经过底下小原点切换

以下为实现代码，首先是html代码：

新建一个css文件，命名为style.css，将其导入html文件里，如图所示

编写css代码，建议大家看代码行数编号，如下：

接下来，新建一个JavaScript文件，选择jQuery模板

再创建一个自己的JavaScript文件，命名为mainjs,用来编写JavaScript代码，然后在html页面，在</body>上面位置，导入这个jQuery和main这个两个js文件，这里注意，两个js的导入，必须先导入jQuery，这样才能调用到jQuery的方法。如图所示：

最后打开main.js文件，编写js代码，注意看代码行数标识，如图：

最后，保存所有文件，运行即可。你学会了么？