为了使用featureCarousel,必须引入jQuery和featureCarousel.js文件。
引入必要的js文件
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="js/jquery.featureCarousel.js"></script>
然后需要引入featureCarousel.css文件
<link rel="stylesheet" href="css/featureCarousel.css" charset="utf-8">
HTML结构
html的结构如下,你需要为每个存放图片的div
设置class为feature
。并且给外围的div
设定id为featureCarousel
,修改这个结构可能会得到意想不到的结果。
<div id="featureCarousel"> <div class="feature"> <img alt="Image Caption" src="image1.jpg"> <div> <p> This is some information that can go along with an image. Anything can be placed here, including images. </p> </div> </div> <div class="feature"> <img alt="Image Caption" src="image2.jpg"> <div> <p> This is some information that can go along with an image. Anything can be placed here, including images. </p> </div> </div> <div class="feature"> <img alt="Image Caption" src="image3.jpg"> <div> <p> This is some information that can go along with an image. Anything can be placed here, including images. </p> </div> </div> </div>
调用插件
以下是最基本的调用方式,参数全是默认值。
<script type="text/javascript"> $("#featureCarousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); </script>
可用参数:
// If zero, take original width and height of image // If between 0 and 1, multiply by original width and height (to get smaller size) // If greater than one, use in place of original pixel dimensions largeFeatureWidth : 0, largeFeatureHeight: 0, smallFeatureWidth: .5, smallFeatureHeight: .5, // how much to pad the top of the carousel topPadding: 20, // spacing between the sides of the container (pixels) sidePadding: 30, // the additional offset to pad the side features from the top of the carousel smallFeatureOffset: 50, // indicates which feature to start the carousel at startingFeature: 1, // speed in milliseconds it takes to rotate the carousel carouselSpeed: 1000, // time in milliseconds to set interval to autorotate the carousel // set to zero to disable it, negative to go left autoPlay: 0, // set to true to enable the creation of blips to indicate how many // features there are counterStyle: 1, // true to preload all images in the carousel before displaying anything preload: true, // Will only display this many features in the carousel // set to zero to disable displayCutoff: 0, // an easing can be specified for the animation of the carousel animationEasing: 'swing'
通过上面的参数,你可以自定义轮播图的外观和css样式。
轮播图中的3d阴影和高光是通过样式表提供的。要修改背景色,只需要修改featureCarousel
的background
。