jquery 3d图片旋转轮播图插件

当前位置:主页 > jQuery库 > 幻灯片和轮播图 > jquery 3d图片旋转轮播图插件
jquery 3d图片旋转轮播图插件
分享:

    插件介绍

    featureCarousel.js是一款能够进行3d图片旋转切换的轮播图插件。效果类似3d旋转木马,在轮播图进行图片切换的时候,后面的图片移动到前面,整体有3d视觉效果。d

    浏览器兼容性

    浏览器兼容性
    时间:2014-10-22
    阅读:

简要教程

为了使用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阴影和高光是通过样式表提供的。要修改背景色,只需要修改featureCarouselbackground