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

2010-06-24 21:49:45 来源：酷站代码网友评论 0 条

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文件里头的图片地址。