伪3D效果图片走马灯

一个模拟3D旋转效果的js走马灯。
混淆过的版本大小为3K。
点击预览效果
浏览器支持情况如下：

• IE6 没有测试
• IE7/8 通过
• FF3.6 通过
• Opera10 通过
• Chrome5 通过

调用的方法非常简单，共需4步。

• 第1步，你需要将以下html代码复制到你的html文件中去。图片的id请按照“fr_rawImg_n”的方式依次设置；

<div id="fr_3drotate"> 
        <div id="fr_cubeRotate"> 
            <img src="./oracle.png" id="fr_rawImg_1" /> 
            <img src="./google.png" id="fr_rawImg_2" /> 
            <img src="./ibm.png" id="fr_rawImg_3" /> 
            <img src="./intel.png" id="fr_rawImg_4" /> 
        </div> 
        <ul id="fr_control"> 
            <li>Oracle</li> 
            <li>Google</li> 
            <li>IBM</li> 
            <li>Intel</li>    
        </ul> 
    </div> 

• 第2步，在html文件中引入fr.rotate.css，其中包含了对走马灯外观的简单设定，你可以自行修改；

• 第3步，在html文件中引入fr.rotate.js。当然，你也可以根据自己的需要引入min和pack文件；

• 第4步，在html文件的底部输入以下js代码。

<script> 
    FR.ThreeDRotate.start({
        time:1000,
        height:185,
        width:272,
        type:'horizontal'
    });
</script> 

参数一共有4个。

• time为每次切换的花费的时间，以毫秒为单位。这个值不能大于8000（8s切换一张图片，应该没这种需求吧），建议设置在500-2000之间；
• height为图片高度；
• width为图片长度；
• type可以取两个值。horizontal指3D旋转的方向为横向；vertical只3D旋转的方向为纵向。

好的，现在你就拥有一个“伪”3D效果的走马灯了。
我此前还写过另外一个图片走马灯效果，如果你感兴趣的话，可以点击此处查看。

评论

8 楼 fehly 2010-09-17  

看着还不错...支持下

7 楼 zcq100 2010-09-16  

感觉不错！

6 楼 同学、木 2010-09-16  

ie6 上无效

5 楼 diferent 2010-09-16  

zhc0822 写道

diferent 写道

Chrome 无效~~

你好，我使用chrome打开，效果正常。附上截图，请查看。

好用了~~ 明天晚上是由于网速问题 CSS没DOWN下来或是下出错了~
另说一句,CHROME 稳定版到6了

4 楼 zhc0822 2010-09-15  

diferent 写道

Chrome 无效~~

你好，我使用chrome打开，效果正常。附上截图，请查看。

3 楼 diferent 2010-09-15  

Chrome 无效~~

2 楼 zhc0822 2010-09-15  

wxq594808632 写道

..我看到jp.我湿了

哇~好多新手帖~荣幸~
这是以前申请的一个WordPress的空间。

1 楼 wxq594808632 2010-09-15  

..我看到jp.我湿了