四屏jQuery焦点图代码
栏目分类：焦点图发布日期：2015-09-02 浏览次数：次

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

代码：

<div class="banner">

  <div class=" jcarousel-skin-index">

    <div class="jcarousel-container jcarousel-container-horizontal">

      <div class="jcarousel-clip jcarousel-clip-horizontal">

        <ul id="index-hero-carousel" class="jcarousel-list jcarousel-list-horizontal">

  <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>

  <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>

  <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>

  <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>

        </ul>

      </div>

    </div>

  </div>

  <ul id="index-hero-control" class="control-index-hero">

    <li> <a href="http://www.juheweb.com" class="index-hero-number"> 1 </a> <a href="http://www.juheweb.com" target="_blank">李萍华在重庆调研</a> </li>

    <li> <a href="http://www.juheweb.com" class="index-hero-number"> 2 </a> <a href="http://www.juheweb.com" target="_blank">李长春新书《文化强国之路》在北京发布</a> </li>

    <li> <a href="http://www.juheweb.com" class="index-hero-number"> 3 </a> <a href="http://www.juheweb.com" target="_blank">王露露会见英国知识产权局局长约翰·奥...</a> </li>

    <li> <a href="http://www.juheweb.com" class="index-hero-number"> 4 </a> <a href="http://www.juheweb.com" target="_blank">王子健在宁夏宣讲党的十八届三中全会精...</a> </li>

  </ul>

</div>