<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="js/base/protoculous-packer.js"></script>
<style type="text/css" >
body{
background-color:white;
}
</style>
</head>
<body >
<div class="lightBox">
<div ><h2><span>精美珠宝抢先看</span></h2></div>
<div class="lightBoxW" id="">
<div class="lightBoxleftBt" id="post-carousel-prev-arrow"><a href="javascript:void(0);"></a></div>
<div class="lightBoxUlList carousel-component" id="lightbox_lists">
<ul id="photos" class="carousel-list" style="position: relative; left: 0px; top: 0px;">
<li>
<a rel="lightbox[post-gallery]" href="images/dba8.jpg" ><img alt=""
width="108" src="images/ba8.jpg"> </a>
<p>
钻石套装
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba7.jpg"><img alt=""
width="108" src="images/ba7.jpg"> </a>
<p>
真爱戒指
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba6.jpg"><img alt=""
width="108" src="images/ba6.jpg"> </a>
<p>
爱心吊坠
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba5.jpg"><img alt=""
width="108" src="images/ba5.jpg"> </a>
<p>
爱心耳环
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba4.jpg"><img alt=""
width="108" src="images/ba4.jpg"> </a>
<p>
五彩缤纷
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba3.jpg"><img alt=""
width="108" src="images/ba3.jpg"> </a>
<p>
梦幻紫色耳钉
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/dba2.jpg"><img alt=""
width="108" src="images/ba2.jpg"> </a>
<p>
七彩石
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/va1.jpg"><img alt=""
width="108" src="images/a1.jpg"> </a>
<p>
雨滴梦
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/va4.jpg"><img alt=""
width="108" src="images/a2.jpg"> </a>
<p>
紫彩石
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/va5.jpg"><img alt=""
width="108" src="images/a3.jpg"> </a>
<p>
珍珠耳环
</p>
</li>
<li>
<a rel="lightbox[post-gallery]" href="images/va2.jpg"><img alt=""
width="108" src="images/a4.jpg"> </a>
<p>
七彩石
</p>
</li>
</ul>
</div>
<div class="lightBoxRightBt" id="post-carousel-next-arrow"><a href="javascript:void(0);"></a></div>
</div>
</div>
</body>
</html>
<script>
( function init() {
$$(".lightBoxW")[0].select("li").each(function(elem) {
elem.observe('mouseover', function(){
elem.addClassName("mouseOver");
});
elem.observe('mouseout', function(){
elem.removeClassName("mouseOver");
});
});
Go10000.Application.run(function() {
// alert(4);
new Carousel('lightbox_lists',
{
numVisible: 5,
scrollInc: 5,
animParameters:{duration:0.5},
nextElementID:'post-carousel-next-arrow',
prevElementID:'post-carousel-prev-arrow',
size:11
}
);
}, [ 'js/prototypeCarousel/carousel.js' ]);
Go10000.Application.run( function() {
new Lightbox();
}, [ 'js/lightbox/js/lightbox.js',
'js/lightbox/css/lightbox.css' ]);
})();
</script>
完整代码请到演示地址下载
原文地址:http://www.corange.cn/archives/2010/12/3740.html