在做网页时经常用到的一个幻灯片效果，几张图片来回滚动，下面有几个圆点可以进行图片的切换，另外两边也有两个箭头来进行图片切换，经常用到这个特效，而每次用到的时候都要调整圆点的位置和左右两边切换图片的位置，搞得挺麻烦，每一次都要查找，索性这一次把代码给贴出来，在自己查找的时候会更快速，只贴了一个CSS的样式，其它部分就不贴了，反正也是自个儿用的，这种效果网上太多了。

@charset "utf-8";

/* theme-default */
.theme-default #slider{margin:0px auto 0px;width:976px;height:319px;}
.theme-default .nivoSlider{background:url("../images/loading.gif") no-repeat 50% 50% rgb(255, 255, 255);margin-bottom:50px;position:relative;}
.theme-default .nivoSlider img{left:0px;top:0px;display:none;position:absolute;}
.theme-default .nivoSlider a{border:0px currentColor;display:block;}
/* 下面是圆点位置的移动，其中 bottom:-5 是移动位置*/
.theme-default .nivo-controlNav{left:380px;width:300px;height:38px;bottom:-5px;padding-top:14px;padding-left:50px;position:absolute;z-index:9;background-image:url("../images/bullets-bg.png");background-repeat:no-repeat;}
/* 下面是圆点位置的移动结束 */
.theme-default .nivo-controlNav a{background:url("../images/bullets.png") no-repeat;border:0px currentColor;width:23px;height:17px;text-indent:-9999px;margin-right:3px;float:left;display:block;}
.theme-default .nivo-controlNav a.active{background-position:0px -17px;}
.theme-default .nivo-directionNav a{background:url("../images/arrows.png") no-repeat;border:0px currentColor;width:65px;height:65px;text-indent:-9999px;display:block;}
/* 两侧大圆位置移动开始，其中 top 是移动位置 */
.theme-default a.nivo-nextNav{background-position:-65px 0px;top:150px;right:30px;}
.theme-default a.nivo-prevNav{left:30px;top:150px;}
.theme-default a.nivo-nextNav:hover{background-position:-65px -65px;top:150px;right:30px;}
.theme-default a.nivo-prevNav:hover{background-position:0px -65px;left:30px;top:150px;}
/* 两侧大圆位置移动结束 */
.theme-default .nivo-caption{font-family:Helvetica,Arial,sans-serif;}
.theme-default .nivo-caption a{color:rgb(255, 255, 255);border-bottom-color:rgb(255, 255, 255);border-bottom-width:1px;border-bottom-style:dotted;}
.theme-default .nivo-caption a:hover{color:rgb(255, 255, 255);}
/* nivoSlider */
.nivoSlider{position:relative;}
.nivoSlider img{left:0px;top:0px;position:absolute;}
.nivoSlider a.nivo-imageLink{margin:0px;padding:0px;border:0px currentColor;left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:6;}
.nivoSlider{position:relative;}
.nivoSlider img{left:0px;top:0px;position:absolute;}
.nivoSlider a.nivo-imageLink{margin:0px;padding:0px;border:0px currentColor;left:0px;top:0px;width:100%;height:100%;display:none;position:absolute;z-index:6;}
.nivo-slice{height:100%;display:block;position:absolute;z-index:5;}
.nivo-box{display:block;position:absolute;z-index:5;}
.nivo-caption{background:rgb(0, 0, 0);left:0px;width:30%;bottom:0px;color:rgb(255, 255, 255);display:none;position:absolute;z-index:8;opacity:0.8;}
.nivo-caption p{margin:0px;display:none;}
.nivo-caption a{display:inline !important;}
.nivo-html-caption{display:none;}
.nivo-directionNav a{top:45%;position:absolute;z-index:9;cursor:pointer;}
.nivo-prevNav{left:0px;}
.nivo-nextNav{right:0px;}
.nivo-controlNav a{position:relative;z-index:9;cursor:pointer;}
.nivo-controlNav a.active{font-weight:bold;}