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

   

     

         

            {foreach from=$banner item=bs name=small}
             
• {$bs.img_url}

            {/foreach}
         

     

     

       

            {foreach from=$banner item=bs name=small}
            {if $smarty.foreach.small.index eq 0}
           
•  

            {else}
           
•  

            {/if}
            {/foreach}
       

     

     
     
 

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