[Java教程]原生js实现轮播图

0 2018-10-14 19:01:28

如何使用原生js实现轮播图效果呢，现在带着大家做一个小小的例子

先说一下这次的轮播图需要实现的功能点：

1.3s自动切换图片,图片切换时提示点跟随切换

2.鼠标划到图片上，自动切换轮播图停止

3.指示点划过切换对应的图片，图片切换时提示点跟随切换

4.点击上一页下一页按钮切换图片

css代码部分

1 /*初始化浏览器默认样式*/ 2 *{ 3 margin: 0; 4 padding: 0; 5 } 6 /*sowingMap*/ 7 .sowingMap{ 8 width: 800px; 9 height: 500px;10 margin: 0 auto;11 position: relative;12 overflow: hidden;13 }14 /*imgPart*/15 .imgPart{16 width: 800px;17 height: 500px;18 position: absolute;19 }20 /*imgSwitch*/21 .imgSwitch{22 width: 800px;23 height: 500px;24 position: absolute;25 list-styl