这种情况其实并不多见,今天在做一个带有缩略图的幻灯时用到,既要loop大图,又要loop小图,如果都用loop只有第一组生效,所以,第二组可以用loop2,第三组可以用loop3。
diy代码示例:
- <div class="foucebox" style="margin:0 auto">
- <!-- 大图 -->
- <div class="bd">
- [loop]
- <div class="showDiv"><a href="{url}"><img src="{pic}" height="340" width="594"></a>
- <div class="foucebox_bg" style="width: 594px;"></div>
- <div>
- <h2 style="bottom: 15px;"><a href="{url}">{title}</a></h2>
- </div>
- </div>
- [/loop]
- </div>
- <!-- 小图 -->
- <div class="hd">
- <ul>
- [loop1]
- <li><a href="{url}"><img src="{pic}"><span class="txt_bg"></span><span class="mask"></span></a></li>
- [/loop1]
- </ul>
- </div>
- </div>
- <script type="text/javascript">
- jQuery(".foucebox").slide({ effect:"fold", autoPlay:true, delayTime:300, startFun:function(i){
- //下面代码控制文字显示
- jQuery(".foucebox .showDiv").eq(i).find("h2").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"15px"},300);
- jQuery(".foucebox .showDiv").eq(i).find("p").css({display:"none",bottom:0}).animate({opacity:"show",bottom:"6px"},300);
- }
- });
- </script>
复制代码 上述代码只是个示例,并无css及jq,所以不要直接复制使用。
|