SuperSlide图片轮播

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。
网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

从此无需网上苦苦寻觅特效，无需加载n个插件，无需害怕代码冲突，你需要的只是一个SuperSlide！

/*banner*/
.banner-image{width: 100%; height: 420px; overflow: hidden;}
.slide-image-box{ width:100%; position: relative;}
.slide-image-box .bd{ width: 100%; height: 420px; overflow: hidden;}
.slide-image-box .bd ul li{ float:left; cursor:pointer;  }
.slide-image-box .hd{ position: absolute; bottom: 20px; left: 45%; z-index: 5;}
.slide-image-box .hd li{display: inline-block; cursor:pointer; width: 12px;  height:12px; margin: 0 8px; background: #fff; border-radius: 50%;  }
.slide-image-box .hd li.on{ background: #f00; }
.slide-image-box .slide-image-prev,
.slide-image-box .slide-image-next{position: absolute; top: 150px; width: 40px; height: 70px; z-index: 6;}
.slide-image-box .slide-image-prev{left: 20%; background: url('images/slide_oriendition.png') 0 -35px no-repeat;}
.slide-image-box .slide-image-next{right: 20%; background: url('images/slide_oriendition.png') 0 -126px no-repeat;}
/*banner*/

<div class="banner-image">
    <div class="slide-image-box" id="slide-image-box">
      <div class="bd">
          <ul>
            {foreach from=$banner item=bs name=small}
              <li>{$bs.img_url}</li>
            {/foreach}
          </ul>
      </div>
      <div class="hd">
        <ul>
            {foreach from=$banner item=bs name=small}
            {if $smarty.foreach.small.index eq 0}
            <li class="on">&nbsp;</li>
            {else}
            <li>&nbsp;</li>
            {/if}
            {/foreach}
        <ul>
      </div>
      <a href="javascript:void(0)" class="slide-image-prev"></a>
      <a href="javascript:void(0)" class="slide-image-next"></a>
  </div>
</div>

$(function(){
    $("#slide-image-box").slide({mainCell:".bd ul",prevCell:".slide-image-prev",nextCell:".slide-image-next"});
});