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"> </li>

            {else}

            <li> </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"});

});