jQuery横向滑动手风琴效果代码



123 491 164



特效描述:jQuery横向滑动 手风琴效果代码,jQuery横向滑动手风琴效果代码

代码结构

1. 引入CSS

<link href="fsbanner.css" rel="stylesheet" type="text/css">

2. 引入JS

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="fsbanner.js"></script>

3. HTML代码

<div class="jquery-script-clear"></div>
<div class="container">
  <h2>Basic</h2>
  <div class="fsbanner" id="demo-1">
    <div style="background-image:url(img/a1.png)"> </div>
    <div style="background-image:url(img/a2.png)"> </div>
    <div style="background-image:url(img/a3.png)"> </div>
    <div style="background-image:url(img/a4.png)"> </div>
  </div>
  <h2>With labels</h2>
  <div class="fsbanner" id="demo-2">
    <div style="background-image:url(img/a1.png)"><span class="name">Image 1</span></div>
    <div style="background-image:url(img/a2.png)"><span class="name">Image 2</span></div>
    <div style="background-image:url(img/a3.png)"><span class="name">Image 3</span></div>
    <div style="background-image:url(img/a4.png)"><span class="name">Image 4</span></div>
  </div>
  <h2>Trigger: mouse hover</h2>
  <div class="fsbanner" id="demo-3">
    <div style="background-image:url(img/a1.png)"><span class="name">Image 1</span></div>
    <div style="background-image:url(img/a2.png)"><span class="name">Image 2</span></div>
    <div style="background-image:url(img/a3.png)"><span class="name">Image 3</span></div>
    <div style="background-image:url(img/a4.png)"><span class="name">Image 4</span></div>
  </div>
</div>
<script src="fsbanner.js"></script> 
<script>
$('#demo-1').fsBanner();
$('#demo-2').fsBanner();
$('#demo-3').fsBanner({'trigger':'mouse'});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动导航菜单 导航切换 滑动选项卡切换 图片滑动 图片切换 文字滑动 文字切换 滑动手风琴 背景切换 滑动星星打分 手风琴 选项卡自动切换 视频切换 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滑动滑过 滚动切换 滑动选项卡切换 选项卡切换 滑动手风琴

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到