如何使用Cloudcoursel,整理如下:
建议和slimbox2同时使用,这样效果比较好
引入JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="JS/jquery.mousewheel.js"></script>
<script type="text/javascript" src="JS/slimbox2.js"></script>
<script type="text/javascript" src="JS/cloud-carousel.1.0.4.js"></script>
引入CSS:
<link href="Styles/jquery-ui-css/jquery-ui-1.7.2.custom.css" rel="Stylesheet" type="text/css" />
<link href="Styles/Slimbox2/slimbox2.css" rel="Stylesheet" type="text/css" media="screen" />
对于div的script:
<script type="text/javascript">
$(document).ready(function(){
$("#da-vinci-carousel").CloudCarousel( {
reflHeight: 56,
reflGap:2,
titleBox: $('#da-vinci-title'),
altBox: $('#da-vinci-alt'),
buttonLeft: $('#but1'),
buttonRight: $('#but2'),
yRadius:40,
xPos: 285,
yPos: 120,
speed:0.15,
mouseWheel:true
});
</script>
<div id="da-vinci-carousel" style="width: 570px; height: 384px;background: url(Images/carousel/bg.jpg); overflow: scroll;">
<a href="Images/Cloud-Images/1.jpg" rel='lightbox' title="Leonardo Da Vinci">
<img class="cloudcarousel" src="Images/Cloud-Images/1.jpg" width="128" height="164" alt="Self-portrait in red chalk, circa 1512-1515." title="Leonardo Da Vinci" />
</a>
<a href="Images/Cloud-Images/2.jpg" rel='lightbox' title="Mona Lisa">
<img class="cloudcarousel" src="Images/Cloud-Images/2.jpg" width="128" height="164" alt="Oil on cotton wood, circa 1503–1505." title="Mona Lisa" />
</a>
<a href="Images/Cloud-Images/3.jpg" rel="lightbox" title="Madonna of the Yarnwinder">
<img class="cloudcarousel" src="Images/Cloud-Images/3.jpg" width="128" height="164" alt="Oil on canvas, circa 1501." title="Madonna of the Yarnwinder" />
</a>
<div id="da-vinci-title">
</div>
<div id="da-vinci-alt">
</div>
<div id="but1" class="carouselLeft" style="position: absolute; top: 20px; right: 64px;">
</div>
<div id="but2" class="carouselRight" style="position: absolute; top: 20px; right: 20px;">
</div>
</div>
效果: