SuperSlide2實現(xiàn)圖片滾動特效

    這里貼一下自己演示的代碼，期望對使用的朋友所有啟發(fā)，我這里是結(jié)合了兩個例子實現(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="">
      <div>
        <ul>
          <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" data-text-id="#thumbTxt1">
            <img src="/attachments/news_gallery/20140528162328_454.jpg" />
          </li>
          <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" data-text-id="#thumbTxt2">
            <img src="/attachments/news_gallery/20140528162328_733.jpg" />
          </li>
        </ul>
        <a href="javascript:void(0)"></a>
        <a href="javascript:void(0)"></a>
      </div>
      <div>
        <a href="javascript:void(0)">←</a>
        <div>
          <ul>
            <li data-bottom-thumb="/attachments/news_gallery/20140528162328_454.jpg" data-text-id="#thumbTxt1">
              <img src="/attachments/news_gallery/20140528162328_454.jpg" />
            </li>
            <li data-bottom-thumb="/attachments/news_gallery/20140528162328_733.jpg" data-text-id="#thumbTxt2">
              <img src="/attachments/news_gallery/20140528162328_733.jpg" />
            </li>
          </ul>
        </div>
        <a 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" });