需要：
jquery.min.js
jquery 轮播插件：
slider.js
css部分：
.flexslider{position:relative;width:100%;height:150px;overflow:hidden;zoom:1;}.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;}.flexslider .slides{zoom:1;}.flex-direction-nav a{width:60px;height:90px;line-height:99em;overflow:hidden;margin:-30px 0;display:block;background:url(./img/ad_ctr.png) no-repeat;position:absolute;top:50%;z-index:10;cursor:pointer;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .3s ease;}.flex-direction-nav .flex-next{background-position:0 -90px;right:0;}.flex-direction-nav .flex-prev{left:0;}.flexslider:hover .flex-next{opacity:0.8;filter:alpha(opacity=25);}.flexslider:hover .flex-prev{opacity:0.8;filter:alpha(opacity=25);}.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50);}.flexslider .img {position:relative;width:100%;background:red;margin-left:-40px;}.flexslider .img a {display:block;width:100%;}.flexslider .img a img {display:block;}.flex-control-nav{width:100%;height:12px;position:absolute;bottom:0px;text-align:center;}.flex-control-nav li{margin:0px;display:inline-block;zoom:1;*display:inline;}.flex-control-paging li a{background:url(./img/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer;}.flex-control-paging li a.flex-active{background-position:0 0;}
<script type="text/javascript">$(function(){$('#slide').flexslider({animation: "slide",direction:"horizontal",easing:"swing",keyboardNav: true, directionNav: true, animationDuration: 0});});</script>
html部分：
<div id="slide" class="flexslider"><ul class="slides"><li><div class="img"><a href = "#" > <img src="img/1.jpg" width="100%" height = "150px" alt="" /></a></div></li><li><div class="img"><a href = "#" ><img src="img/2.jpg" width="100%" height = "150px" alt="" /></a></div></li><li><div class="img"><a href = "#" ><img src="img/3.jpg" width="100%" height = "150px" alt="" /></a></div></li></ul></div><!--flexslider end-->
完整html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">.flexslider{position:relative;width:100%;height:150px;overflow:hidden;zoom:1;}.flex-viewport{max-height:2000px;-webkit-transition:all 1s ease;-moz-transition:all 1s ease;transition:all 1s ease;}.flexslider .slides{zoom:1;}.flex-direction-nav a{width:60px;height:90px;line-height:99em;overflow:hidden;margin:-30px 0;display:block;background:url(./img/ad_ctr.png) no-repeat;position:absolute;top:50%;z-index:10;cursor:pointer;opacity:0;filter:alpha(opacity=0);-webkit-transition:all .3s ease;}.flex-direction-nav .flex-next{background-position:0 -90px;right:0;}.flex-direction-nav .flex-prev{left:0;}.flexslider:hover .flex-next{opacity:0.8;filter:alpha(opacity=25);}.flexslider:hover .flex-prev{opacity:0.8;filter:alpha(opacity=25);}.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1;filter:alpha(opacity=50);}.flexslider .img {position:relative;width:100%;background:red;margin-left:-40px;}.flexslider .img a {display:block;width:100%;}.flexslider .img a img {display:block;}.flex-control-nav{width:100%;height:12px;position:absolute;bottom:0px;text-align:center;}.flex-control-nav li{margin:0px;display:inline-block;zoom:1;*display:inline;}.flex-control-paging li a{background:url(./img/dot.png) no-repeat 0 -16px;display:block;height:16px;overflow:hidden;text-indent:-99em;width:16px;cursor:pointer;}.flex-control-paging li a.flex-active{background-position:0 0;}</style><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript">$(function(){$('#slide').flexslider({animation: "slide",direction:"horizontal",easing:"swing",keyboardNav: true, directionNav: true, animationDuration: 0});});</script><script type="text/javascript" src="slider.js"></script> </head><body><div id="slide" class="flexslider"><ul class="slides"><li><div class="img"><a href = "#" > <img src="img/1.jpg" width="100%" height = "150px" alt="" /></a></div></li><li><div class="img"><a href = "#" ><img src="img/2.jpg" width="100%" height = "150px" alt="" /></a></div></li><li><div class="img"><a href = "#" ><img src="img/3.jpg" width="100%" height = "150px" alt="" /></a></div></li></ul></div><!--flexslider end--></body></html>
