四张图片每隔2秒换下一张
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{padding: 0;margin: 0;}
body{background-color: green;}
#cou{width: 540px;height: 400px;margin: 30px auto;position: relative;}
#content img{width: 540px;height: 400px;}
#content div{display: none;}
#content div.on{display: block;}
ol,li{list-style: none;}
ol{position: absolute;bottom: 15px;left: 50%;transform: translateX(-50%);}
.item li{float: left;width: 10px;height: 10px;border-radius: 50%;background-color: #fff;
margin-right: 10px;}
.item li.current{background-color: orange;}
.arrow{width: 32px;height: 32px;display: inline-block;position: absolute;
top: 184px;background: rgba(255,255,255,0.3);display: none;}
.arrow img{width: 28px;height: 28px;margin-top: 2px;}
.ar{right: 0px;transform: rota