网站上常用的“焦点图/幻灯片”“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"});
});