首页 > 网页特效 > Flash相册 > Carousel加LightBox灯箱效果的3D旋转图片特效

Carousel加LightBox灯箱效果的3D旋转图片特效

时间:2010-06-24    来源:酷站代码

Carousel and LightBox 2.0是一款3D旋转图片展示特效,支持键盘/鼠标操控方式,支持图片格式和swf文件格式,可通过XML文件对效果进行订制,大图的显示结合了流行的LightBox灯箱效果,颇有创意。

使用教程:

1.在<head>区加入以下代码

  <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  <script type="text/javascript" src="js/prototype.js"></script>
  <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
  <script type="text/javascript" src="js/lightbox.js"></script>
  <script type="text/javascript" src="swfobject.js"></script>

2.在<body>区依次加入以下代码

<script type="text/javascript">
function aclick(anchor_id) {
 var a = document.getElementById(anchor_id);
 mainLightbox.start(a);
}
</script>
<div style="display: none"> <!-- This is and hidden div -->
 <a id="anchor1_id" href="photos/01.jpg" rel="lightbox[set1]">a</a>
 <a id="anchor2_id" href="photos/02.jpg" rel="lightbox[set1]">b</a>
 <a id="anchor3_id" href="photos/03.jpg" rel="lightbox[set1]">c</a>
    <a id="anchor4_id" href="photos/04.jpg" rel="lightbox[set1]">d</a>
    <a id="anchor5_id" href="photos/05.jpg" rel="lightbox[set1]">e</a>
    <a id="anchor6_id" href="photos/06.jpg" rel="lightbox[set1]">f</a>
    <a id="anchor7_id" href="photos/07.jpg" rel="lightbox[set1]">g</a>
</div>

 以上的ID必须跟lightboxedcarousel.xml的ID名称一样,才能开启LightBox效果。

<div class="movie">
 <div id="carouseldiv">
  <p>This slideshow requires <a href="http://www.adobe.com/go/getflashplayer">Adobe Flash Player 9.0</a> (or higher). JavaScript must be enabled.</p>
 </div>
</div>
<script type="text/javascript">
 swfobject.embedSWF("Carousel.swf", "carouseldiv", "100%", "100%", "9.0.0", false, {xmlfile:"lightboxedcarousel.xml"}, {wmode: "opaque", allowScriptAccess: "always"});
</script>

3.修改lightboxedcarousel.xml文件里头的图片地址。


栏目搜索>>分类导航
Flash幻灯 jQuery幻灯 JS幻灯 Flash相册 jQuery相册 图片特效 导航菜单 广告代码 在线客服 表单按钮 其它特效

HTML CSS JavaScript Dreamweaver Fireworks 设计分享

建站教程 网站运营 实用工具 网页模板 网页素材

CSS酷站 网上购物 设计团队 设计博客
下载排行榜
31款简单实用的CSS+JS下拉菜单脚本
带标题和数字导航的JS焦点幻灯特效代码
半透明立体质感的宽屏flash+xml焦点幻灯代码
简洁效果多图切换flash幻灯焦点图代码
适合摄影网站超漂亮的宽屏flash+xml幻灯轮换代码
透明质感上下滑动带小图预览5屏JS焦点图幻...
唯美华丽带缩略小图的滑动式JQuery幻灯片特...
14款很漂亮的jQuery导航菜单插件
3D立体效果金字塔环形旋转的flash+xml相册代码
带标题显示的宽屏jQuery焦点幻灯片代码
教程排行榜
21个可用于网站和博客的免费视频播放器插件
10个WEB开发者应该收藏的实用工具网站推荐
20款国外知名的PHP开源免费CMS系统推荐
10款有利于加速WEB开发的必备CSS开发框架
国外十五款优秀的免费开源电子商务平台
新浪SAE新手教程:如何下载和安装DiscuzX2.0?
微博数据分析:新浪微博企业微博发布时间规...
12款跨浏览器的网页兼容性测试工具推荐
国外五款主流的免费网站流量统计工具
巧用QQ漂流瓶做网站营销推广