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

2018-09-06   阅读:2488   分类:前端    标签: 轮播插件

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


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/16.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

上一篇:没有更多了文章

下一篇: TP5搜索分页

文章评论(0)

登录
简忆博客壁纸 头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×