jquery.SuperSlide.2.1.1.js轮播插件使用
侧边栏壁纸
  • 累计撰写 635 篇文章
  • 累计收到 0 条评论

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

加速器之家
2024-08-22 / 0 评论 / 7 阅读 / 正在检测是否收录...

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="https://www.tpxhm.com/fdetail/16.html"  target="_blank" >
		    <img src="https://www.tpxhm.com/fdetail/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


0

评论

博主关闭了当前页面的评论