我爱模板网 > 特效插件 > 滚动轮播 >  基于SuperSlide的上下切换的轮播图插件正文

基于SuperSlide的上下切换的轮播图插件

特效介绍
superslide

本图文轮播插件是基于强大的jQuery SuperSlide轮播插件实现的图文上下轮播切换效果。兼容性自不必说。主要是设计比较新颖,有点橱窗的效果。css的样式可以自己进行调整,图片如果要增加,需要手动修改上面的计数器的数字。
使用方法
1、引入css
<link href="css/5imoban.css" rel="stylesheet" />
2、加入html
<div class="activityBox" style="margin:30px auto">
  <div class="title">
    <h2>静态网页模板</h2>
    <span class="ac_List"><a href="#">全部</a><span class="pageState"><span>1</span>/5</span></span><span class="prev"></span><span class="next"></span>
  </div>
  <div class="content">
    <span class="leftZone"></span>
    <div class="contentInner">
      <div class="tempWrap" style="overflow:hidden; position:relative; height:240px">
        <ul style="position: relative; padding: 0px; margin: 0px; top: 0px;">
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/1.jpg"></a>
            <p class="mt5"><a href="#">英雄OR枭雄</a></p>
            <p>截止日期:12月10日<span>246人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/2.jpg"></a>
            <p class="mt5"><a href="#">表白:那些没有好好说的再见</a></p>
            <p>截止日期:12月12日<span>1001人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/3.jpg"></a>
            <p class="mt5"><a href="#">王的盛宴</a></p>
            <p>截止日期:12月04日<span>797人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/4.jpg"></a>
            <p class="mt5"><a href="#">特价票</a></p>
            <p>截止日期:12月27日<span>892人关注</span></p>
          </li>
          <li style="height: 240px;"><a href="#" target="_blank"><img src="images/5.jpg"></a>
            <p class="mt5"><a href="#">少年派的奇幻漂流</a></p>
            <p>截止日期:12月07日<span>1591人关注</span></p>
          </li>
        </ul>
      </div>
    </div>
    <span class="rightZone"></span>
  </div>
</div>
3、引入jQuery库和SuperSlide插件
<script src="http://www.5imoban.net/download/jquery/jquery.1.11.3.js"></script>
<script src="http://www.5imoban.net/download/SuperSlide/SuperSlide.2.1.3.js"></script>
4、调用插件
jQuery(".activityBox").slide({
    mainCell:".contentInner ul",
    effect:"top",
    delayTime:400
});



部分素材资源来源网站,本站提供免费下载,如有侵权请联系站长马上删除!
下载 提取码/密码:4up9(点击复制密码) 预览
上一篇:基于Orbit的js滚动插件 下一篇:左右拖拽旋转展示3D万花筒jQuery特效
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
选择头像:
最新评论

猜你喜欢