1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
|
<html>
<head>
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.4.min.js"></script>
<script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 200,
yPos: 30,
buttonLeft: $('#but3'),
buttonRight: $('#but4'),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
FPS:30,
autoRotate: 'left',
autoRotateDelay: 3000,
speed:0.15,
mouseWheel:true,
minScale:0.25,
reflHeight:50,
yRadius:80
}
);
});
</script>
</head>
<body>
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:400; height:200;background:#000;overflow:scroll;">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class = "cloudcarousel" src="1.png" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="2.png" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="3.png" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="4.png" alt="Flag 4 Description" title="Flag 4 Title" />
</div>
</body>
</html> |
Partager