這里貼一下自己演示的代碼，期望對使用的朋友所有啟發(fā)，我這里是結(jié)合了兩個例子實(shí)現(xiàn)的

.focus-item ul li.item{

  text-align: center;

}

.scroll-area .prev,.scroll-area .next{

  position: absolute;

  bottom: 590px;

  width: 29px;

  height: 64px;

  opacity: 0.6;

  overflow: hidden;

  display: none;

  text-indent: -999px;

  border: medium none;

  background: url('/images/arrowLR.png') no-repeat scroll 0% 0% transparent;

}

.scroll-area .prev{

  left: 0px;

  background-position: -50px 0px;

}

.scroll-area .next{

  right: 0px;

}

.scroll-area .bdOn .prev,.scroll-area .bdOn .next{

  display: block;

}

.scroll-area .focus-hd{

  /*width: 832px;*/

  /*left: 60px;*/

  /*position: absolute;*/

  /*height: 100px;*/

  /*overflow: hidden;*/

  left: 63px;

  position: absolute;

}

.focus-hd .sNext, .focus-hd .sPrev{

  float: left;

  display: block;

  width: 14px;

  height: 47px;

  text-indent: -9999px;

  background: url('/images/sprites1008.png') no-repeat scroll 0px -3046px transparent;

}

.focus-hd .sNext{

  background-position: 0px -2698px;

}

.focus-hd .show_bottom_nav {

  float: left;

  margin: 0px 6px;

  display: inline;

  width: 832px;

  overflow: hidden;

}

.focus-hd .show_bottom_nav ul li{

  margin-left:15px;

}html演示代碼：

<div id="" class="scroll-area">

  <div class="focus-item">

    <ul>

      <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1">

        <img src="/attachments/news_gallery/20140528162328_454.jpg" alt="標(biāo)題1" />

      </li>

      <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2">

        <img src="/attachments/news_gallery/20140528162328_733.jpg" alt="標(biāo)題2" />

      </li>

    </ul>

    <a class="prev" href="javascript:void(0)"></a>

    <a class="next" href="javascript:void(0)"></a>

  </div>

  <div class="focus-hd" style="">

    <a class="sPrev prevStop" href="javascript:void(0)">←</a>

    <div class="show_bottom_nav">

      <ul>

        <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" class="item" data-text-id="#thumbTxt1" style="float: left">

          <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_454.jpg" alt="標(biāo)題1" />

        </li>

        <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" class="item" data-text-id="#thumbTxt2" style="float: left">

          <img style="width: 150px;height: 100px" src="/attachments/news_gallery/20140528162328_733.jpg" alt="標(biāo)題2" />

        </li>

      </ul>

    </div>

    <a class="sNext" href="javascript:void(0)">→</a>

  </div>

</div>js腳本代碼：

jQuery(".scroll-area").slide({titCell:'.focus-hd li',mainCell:'.focus-item ul',delayTime:0,trigger:0,autoPlay:true});

jQuery(".scroll-area .focus-item").hover(function(){jQuery(this).addClass("bdOn")},function(){jQuery(this).removeClass('bdOn')});

//小標(biāo)簽的導(dǎo)航

jQuery(".scroll-area .show_bottom_nav").slide({ mainCell:"ul",delayTime:100,vis:5,effect:"left",autoPage:true,prevCell:".sPrev",nextCell:".sNext" });

更多信息請查看IT技術(shù)專欄