全屏100%宽度自适应焦点图jquery插件感谢大话主席作者的贡献。感谢这个插件。自适应焦点图很不错。所以我收藏了下。喜欢的话你也可以下载一个。

<div class="block_home_slider">
  <div id="home_slider" class="flexslider">
    <ul class="slides">
      <li>
        <div class="slide"> <img src="image/pic_home_slider_1.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_2.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_3.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_4.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
<script type="text/javascript">
$(function () {
$('#home_slider').flexslider({
	animation : 'slide',
	controlNav : true,
	directionNav : true,
	animationLoop : true,
	slideshow : false,
	useCSS : false
});

});
</script> 
</div>

css

.block_home_slider {
	padding: 1px;
	position: relative;
	background-color: #ffffff;
	border: 4px solid #f2f2f2;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	behavior: url(js/PIE.htc); /*半透明兼容*/
	text-align: center;
	line-height: 0px;
	margin-right: auto;
	margin-left: auto;
}  /*底部小图标*/
.block_home_slider .slide {position:relative;}
.block_home_slider .caption {padding:13px 16px 12px; position:absolute; left:0px; right:0px; bottom:0px; background:url(bg_caption.png); text-align:left;}
.block_home_slider .caption p {padding-bottom:0px; font-size:11px; color:#dedede; text-shadow:0px -1px #000000; line-height:17px;}
.block_home_slider .caption p.title {padding-bottom:6px; font-size:15px; color:#ffffff; font-weight:bold; line-height:normal;}
.block_home_slider .flex-direction-nav a {width:25px; height:25px; margin-top:-27px; display:block; position:absolute; top:50%; background-repeat:no-repeat; background-image:url(sprite_arrow_2.png); text-indent:-9000px;}
.block_home_slider .flex-direction-nav a.flex-prev {left:6px; background-position:left top;}
.block_home_slider .flex-direction-nav a.flex-prev:hover {background-position:left bottom;}
.block_home_slider .flex-direction-nav a.flex-next {right:6px; background-position:right top;}
.block_home_slider .flex-direction-nav a.flex-next:hover {background-position:right bottom;}
.block_home_slider .flex-control-paging {padding-top:15px; display:inline-block;}
.block_home_slider .flex-control-paging li {
	margin: 0px;
	padding: 0px;
	float: left;
	overflow: hidden;
	list-style-type: none;
}
.block_home_slider .flex-control-paging li a {width:12px; height:12px; display:block; background-repeat:no-repeat; background-image:url(sprite_nav_3.png); text-indent:-9000px; cursor:pointer;}
.block_home_slider .flex-control-paging li a.flex-active {background-position:right top;}

.block_home_post_feature {width:300px;}
.block_home_post_feature p {padding-bottom:0px;}



.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
	list-style-type: none;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}

js加载部分

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>