<title>jQuery幻灯片插件anoSlide演示</title>
* { margin: 0; padding: 0;}
.carousel { position: relative; width: 900px; margin: 0 auto; background: url(/api/jq/anoSlide/images/loader.gif) center center no-repeat;}
.carousel .next, .carousel .prev { display: none; position: absolute; bottom:20px; left:50%; width: 56px; height: 56px; margin-top:-28px; z-index:9999; cursor:pointer;}
.carousel .prev { margin-left: -60px; background: url(/api/jq/anoSlide/images/prev.png) 0 0 no-repeat; }
.carousel .next { margin-right: -60px; background: url(/api/jq/anoSlide/images/next.png) 0 0 no-repeat;}
.carousel ul { background-color: #fff;}
.carousel li { display: none; background-color: #fff;}
.carousel li a { display: block; margin: 5px;}
.carousel li img { display: block; width: 100%; border: 0 none;}
.paging { position:absolute; z-index:9998;}
.paging a { float:left; width: 40px; height: 40px; background:url(/api/jq/anoSlide/images/dots.png) 0px -40px no-repeat; cursor:pointer;}
.paging a:hover, .paging a.current { background:url(/api/jq/anoSlide/images/dots.png) 0px 0px no-repeat;}
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/api/jq/anoSlide/js/jquery.anoslide.js"></script>