Code

仿2010世博会官网焦点幻灯。
仿2010世博会官网焦点幻灯。
效果预览
请稍候...
  • 图片标题一
  • 图片标题二
  • 图片标题三
  • 图片标题四
代码
1.在body里加入如下HTML代码:

<div id="expo2010"><!--焦点图盒子-->
  <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_expo2010_wrap
    {
        padding: 2px;
        border: 1px solid #999;
        float: left;
        background: #fff;
    }
    .mF_expo2010 .pic li
    {
        position: absolute;
    }
    .mF_expo2010 .txt li
    {
        position: absolute;
        z-index: 2;
        left: 0;
        height: 36px;
        line-height: 36px;
    }
    .mF_expo2010 .txt li a
    {
        display: block;
        color: #fff;
        padding: 2px 0 0 16px;
        font-size: 14px;
        font-weight: bold;
        text-decoration: none;
    }
    .mF_expo2010 .txt-bg
    {
        position: absolute;
        bottom: 0;
        z-index: 1;
        height: 36px;
        background: #000;
        filter: alpha(opacity=40);
        opacity: 0.4;
    }
    .mF_expo2010 .num
    {
        position: absolute;
        z-index: 3;
        bottom: 8px;
        right: 8px;
    }
    .mF_expo2010 .num li
    {
        float: left;
        position: relative;
        width: 22px;
        height: 18px;
        line-height: 18px;
        overflow: hidden;
        text-align: center;
        margin-right: 1px;
        cursor: pointer;
    }
    .mF_expo2010 .num li a, .mF_expo2010 .num li span
    {
        position: absolute;
        z-index: 2;
        display: block;
        color: #fff;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none;
    }
    .mF_expo2010 .num li span
    {
        z-index: 1;
        background: #fff;
        filter: alpha(opacity=50);
        opacity: 0.5;
    }
    .mF_expo2010 .num li.current a, .mF_expo2010 .num li.hover a
    {
        background: #F60;
    }
</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_expo2010.js" type="text/javascript"></script>

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

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

参考网站