/*清除边距*/
/*div, ul, li { margin: 0; padding: 0; }*/

/*首先准备一个放图片的容器*/
.container { width: 500px; height: 280px; position: relative; }

/*图片样式*/
.container img { position: absolute; /*把所有图片放在同一个位置*/ width: 100%; height: 100%; transition-duration: 1s; /*设置过渡时间*/ opacity: 0; /*把所有图片变透明*/ }
/*图片显示开关*/
.container img.on { opacity: 1; /*用于显示图片*/ }

/*左右按钮 按钮用图片更好点,这里为了简便就用大于小于号*/
.leftClick, .rightClick { position: absolute; top: 200px; width: 60px; height: 100px; line-height: 100px; opacity: 0.5; text-align: center; font-size: 60px; color: #ccc; display: none; /*先隐藏按钮*/ cursor: pointer; /*设置鼠标悬停时的样式*/ }
.leftClick { left: 0; }
.rightClick { right: 0; }
.container:hover .leftClick, .container:hover .rightClick { display: block; /*鼠标悬停才容器范围内时显示按钮*/ }
.leftClick:hover, .rightClick:hover { color: #fff; }

/*焦点*/
.container ul { position: absolute; bottom: 0; max-width: 500px; padding: 5px 200px; left: calc(50% - 250px); }
.container ul li { list-style: none; float: left; width: 10px; height: 10px; border-radius: 50%; margin-left: 10px; background-color: #ccc; cursor: pointer; }
.container ul li.active { background-color: #fff; /*焦点激活时的样式*/ }