Code

3D图片幻灯。
3D图片幻灯。
效果预览
请稍候...
代码
1.在body里加入如下HTML代码:

<div id="3dslider"><!--焦点图盒子-->
  <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_slide3D_wrap
    {
        padding: 2px;
        border: 1px solid #999;
        float: left;
        background: #fff;
    }
    .mF_slide3D .pic li
    {
        float: left;
        display: inline;
        overflow: hidden;
    }
    .mF_slide3D .pic li img
    {
        width: 0;
    }
    .mF_slide3D .mask11, .mF_slide3D .mask12
    {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid dashed dashed solid;
        border-color: #fff transparent transparent #fff;
        filter: chroma(color=#000000);
    }
    .mF_slide3D .mask12
    {
        top: auto;
        bottom: 0;
        border-style: dashed dashed solid solid;
        border-color: transparent transparent #fff #fff;
    }
    .mF_slide3D .mask21, .mF_slide3D .mask22
    {
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        overflow: hidden;
        border-style: solid solid dashed dashed;
        border-color: #fff #fff transparent transparent;
        filter: chroma(color=#000000);
    }
    .mF_slide3D .mask22
    {
        top: auto;
        bottom: 0;
        border-style: dashed solid solid dashed;
        border-color: transparent #fff #fff transparent;
    }
    .mF_slide3D .num
    {
        position: absolute;
        z-index: 3;
        top: 4px;
        right: 2px;
    }
    .mF_slide3D .num li
    {
        float: left;
        display: inline;
        width: 6px;
        height: 6px;
        line-height: 6px;
        border: 1px solid #4BA8F9;
        overflow: hidden;
        text-align: center;
        margin-right: 4px;
        cursor: pointer;
    }
    .mF_slide3D .num li a
    {
        color: #333;
        display: block;
        background: #ffffff;
        text-decoration: none;
        text-indent: -9999px;
    }
    .mF_slide3D .num li.current a, .mF_slide3D .num li.hover a
    {
        color: #fff;
        background: #4BA8F9;
    }
    .mF_slide3D .next, .mF_slide3D .prev
    {
        position: absolute;
        z-index: 3;
        top: 140px;
        text-indent: -9999px;
        width: 24px;
        height: 24px;
        background: #f1f1f1;
        cursor: pointer;
    }
    .mF_slide3D .next
    {
        right: 1px;
        background: url(images/ron.png) no-repeat;
    }
    .mF_slide3D .prev
    {
        left: 1px;
        background: url(images/lon.png) no-repeat;
    }
</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_slide3D.js" type="text/javascript"></script>

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

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

参考网站