WebAPI|完整轮播图（4） WebAPI|轮播图

【WebAPI|完整轮播图（4）】我们终于迎来了最完整的轮播图
当然还是WebAPI做的
依旧和之前一样，结构样式只给代码，script里面会有一些注释
有的图片路径可能会报错什么的，因为我本来使用的是本地图片，然后换成了临时百度的图片，图片路径出错了你们要自己换图片，反正是不要指望我了，嘻嘻
一、结构

文章图片文章图片文章图片文章图片文章图片 < >

二、样式

* { padding: 0; margin: 0; list-style: none; border: 0; }.all { width: 500px; height: 200px; padding: 7px; border: 1px solid #ccc; margin: 100px auto; position: relative; }.screen { width: 500px; height: 200px; overflow: hidden; position: relative; }.screen li { width: 500px; height: 200px; overflow: hidden; float: left; }.screen ul { position: absolute; left: 0; top: 0px; width: 3000px; }.all ol { position: absolute; right: 10px; bottom: 10px; line-height: 20px; text-align: center; }.all ol li { float: left; width: 20px; height: 20px; background: #fff; border: 1px solid #ccc; margin-left: 10px; cursor: pointer; }.all ol li.current { background: yellow; }#arr { display: none; }#arr span { width: 40px; height: 40px; position: absolute; left: 5px; top: 50%; margin-top: -20px; background: #000; cursor: pointer; line-height: 40px; text-align: center; font-weight: bold; font-family: '黑体'; font-size: 30px; color: #fff; opacity: 0.3; border: 1px solid #fff; }#arr #right { right: 5px; left: auto; }

三、行为