jquery.SuperSlide.2.1.1.js轮播插件使用

2018-09-06 阅读：7251 类型：前端分类：轮播插件标签：轮播插件

SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。

网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！

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

以下是一个简单的案例

html代码：

<div class="slideBox2s">  
<div class="hd">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
       </ul>
</div> 
<ul class="bd">    
	<li>    
		<a href=""  target="_blank" >
		    <img src="12.jpg" alt="">
		</a>    
	</li>    
</ul> 
</div>   
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->    
<a class="prev" href="javascript:void(0)"></a>    
<a class="next" href="javascript:void(0)"></a>    
</div> 
<style>
.slideBox2s{ width:261px; height:361px; position:relative; margin: 0 auto;  }
.slideBox2s .bd{ position:relative; height:100%; z-index:0;   }
.slideBox2s .bd li{ zoom:1; vertical-align:middle; }
.slideBox2s .bd li img{width:261px; height:361px; }

/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox1s .prev,.slideBox2s .prev,.slideBox3s .prev,.slideBox4s .prev{ display: block; width: 18px; height: 19px; background: url(btnico_left.jpg) no-repeat center top; position: absolute; right: 25px;top: -38px;}
.slideBox1s .next,.slideBox2s .next,.slideBox3s .next,.slideBox4s .next{display: block; width: 18px; height: 19px; background: url(btnico_right.jpg) no-repeat center top; position: absolute; right: 0px;top: -38px;}
</style>

js代码：

<script>
  $(function(){
     jQuery(".slideBox-banner").slide({mainCell:".bd",autoPlay:true,delayTime:500,effect:"leftLoop",interTime:2000}); 
 })
</script>

附件：

jquery.SuperSlide.2.1.1.txt