Code

手风琴效果展示图片。
手风琴效果展示图片。
效果预览
请稍候...
  • 图片标题一
  • 图片标题二
  • 图片标题三
  • 图片标题四
代码
1.在body里加入如下HTML代码:

<div id="luluJQ"><!--焦点图盒子-->
  <div class="loading"><span>请稍候...</span></div><!--载入画面(可删除)-->
  <ul class="pic"><!--内容列表-->
        <li><a href="#"><img src="images/1.jpg" alt="图片标题一" /></a></li>
        <li><a href="#"><img src="images/2.jpg" alt="图片标题二" /></a></li>
        <li><a href="#"><img src="images/3.jpg" alt="图片标题三" /></a></li>
        <li><a href="#"><img src="images/4.jpg" alt="图片标题四" /></a></li>
  </ul>
</div>
<div style="clear:both;"></div><!--清除浮动-->

2.在head标签内加入css:

<style type="text/css">
    .mF_luluJQ_wrap
    {
        padding: 8px;
        border: 1px solid #999;
        float: left;
        background: #fff;
    }
    .mF_luluJQ
    {
        width: 546px;
    }
    .mF_luluJQ .pic
    {
        width: 100%;
    }
    .mF_luluJQ .pic li
    {
        position: absolute;
    }
    .mF_luluJQ .pic li a
    {
        display: block;
        width: 100%;
        height: 100%;
        position: relative;
        text-decoration: none;
        overflow: hidden;
    }
    .mF_luluJQ .pic li a span
    {
        display: block;
        position: relative;
        width: 100%;
        height: 34px;
        line-height: 34px;
        overflow: hidden;
    }
    .mF_luluJQ .pic li a span b
    {
        display: block;
        position: relative;
        color: #fff;
        padding-left: 16px;
        font-size: 14px;
        z-index: 1;
        cursor: pointer;
    }
    .mF_luluJQ .pic li a span i
    {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        filter: alpha(opacity=50);
        opacity: 0.5;
        background: #000;
    }
</style>

3.在body底部引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/myfocus-1.1.0.min.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/mF_luluJQ.js" type="text/javascript"></script>

4.在body底部添加js代码:

<script type="text/javascript">
    myFocus.set({
        id: 'luluJQ', //焦点图盒子ID
        pattern: 'mF_luluJQ', //风格应用的名称
        time: 5, //切换时间间隔(秒),省略设置即不自动切换
        trigger: 'click', //触发切换模式:'click'(点击)/'mouseover'(悬停),默认'click'
        width: 450, //设置宽度(主图区)
        height: 296, //设置高度(主图区)
        txtHeight: 'default'//文字层高度设置,'default'为默认高度,0为隐藏,默认'default'
    });
</script>

参考网站