四屏jQuery焦点图代码，鼠标点击展开图片标题。此款效果适用于门户网站。

代码：

1. <div class="banner"> 
2.   <div class=" jcarousel-skin-index"> 
3.     <div class="jcarousel-container jcarousel-container-horizontal"> 
4.       <div class="jcarousel-clip jcarousel-clip-horizontal"> 
5.         <ul id="index-hero-carousel" class="jcarousel-list jcarousel-list-horizontal"> 
6.   <li jcarouselindex="1" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal"> <a href="http://www.juheweb.com" target="_blank"><img src="images/t_17183850202.jpg" ></a></li> 
7.   <li jcarouselindex="2" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal"> <a href="http://www.juheweb.com" target="_blank"><img src="images/t_101815920.jpg"></a> </li> 
8.   <li jcarouselindex="3" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-3 jcarousel-item-3-horizontal"> <a href="http://www.juheweb.com" target="_blank"><img src="images/t_518235381.jpg"></a> </li> 
9.   <li jcarouselindex="4" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-4 jcarousel-item-4-horizontal"> <a href="http://www.juheweb.com" target="_blank"><img src="images/t_2183446679.jpg"></a> </li> 
10.         </ul> 
11.       </div> 
12.     </div> 
13.   </div> 
14.   <ul id="index-hero-control" class="control-index-hero"> 
15.     <li> <a href="http://www.juheweb.com" class="index-hero-number"> 1 </a> <a href="http://www.juheweb.com" target="_blank">李萍华在重庆调研</a> </li> 
16.     <li> <a href="http://www.juheweb.com" class="index-hero-number"> 2 </a> <a href="http://www.juheweb.com" target="_blank">李长春新书《文化强国之路》在北京发布</a> </li> 
17.     <li> <a href="http://www.juheweb.com" class="index-hero-number"> 3 </a> <a href="http://www.juheweb.com" target="_blank">王露露会见英国知识产权局局长约翰·奥...</a> </li> 
18.     <li> <a href="http://www.juheweb.com" class="index-hero-number"> 4 </a> <a href="http://www.juheweb.com" target="_blank">王子健在宁夏宣讲党的十八届三中全会精...</a> </li> 
19.   </ul> 
20. </div>