首页 > 特效插件 > 滚动轮播 >  jQuery三屏3格百叶窗效果滚动图片代码正文

jQuery三屏3格百叶窗效果滚动图片代码

特效介绍
jquery百叶窗图片轮播代码 兼容IE6的jQuery三屏3格百叶窗效果滚动图片代码免费下载,可以设置标题,有利于优化,建议标题字数不超过28个字符。
使用方法
1、在头部引入jquery.js、zzsc.css、zzsc.js
2、复制下面的代码到需要使用的地方
<div class="in-stock-figure">
    <div class="figure-block-1">
        <a class="figure figure-1" data-i="1" data-src="images/01.png" href="http://www.5imoban.net" target="_blank"></a><!-- .figure -->
        <a class="figure figure-2" data-i="2" data-src="images/02.png" href="http://www.5imoban.net" target="_blank"></a><!-- .figure -->
        <a class="figure figure-3" data-i="3" data-src="images/03.png" href="http://www.5imoban.net" target="_blank"></a><!-- .figure -->
        <div data-row="1" class="figure-img-container figure-1"><div class="figure-img center init"></div></div>
        <div data-row="2" class="figure-img-container figure-2"><div class="figure-img center init"></div></div>
        <div data-row="3" class="figure-img-container figure-3"><div class="figure-img center init"></div></div>
        <p id="figure-title-1" class="figure-title">井上雄彦 画集</p>
        <p id="figure-title-2" class="figure-title">ELISA 革命机第二季ED(附DVD)</p>
        <p id="figure-title-3" class="figure-title">口袋妖怪 3DS游戏卡盒</p>
        <p id="figure-title-4" class="figure-title">CLAMP IN WONDERLAND</p>
        <p id="figure-title-5" class="figure-title">干物妹小埋 1</p>
        <p id="figure-title-6" class="figure-title">舰队collection 横須賀鎮守府編(2)</p>
    </div><!-- .figure-block-1 -->        
    <div class="figure-block-2 clearfix">
        <a class="figure figure-4" data-i="4" data-src="images/04.jpg" href="http://www.5imoban.net" target="_blank"><img src="images/m01.jpg" class="figure-img"></a><!-- .figure -->
        <a class="figure figure-5" data-i="5" data-src="images/05.jpg" href="http://www.5imoban.net" target="_blank"><img src="images/m02.jpg" class="figure-img"></a><!-- .figure -->
        <a class="figure figure-6" data-i="6" data-src="images/06.jpg" href="http://www.5imoban.net" target="_blank"><img src="images/m03.jpg" class="figure-img"></a><!-- .figure -->
        <a href="http://www.5imoban.net" class="figure last" target="_blank"><div class="more"><img src="images/figure-more.jpg" alt="前往萌猫商城"></div></a>
    </div><!-- .figure-block-2 -->
</div><!-- .in-stock-figure -->