幻灯片/轮播

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

阿里云


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

  1. <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
  2. <script type="text/javascript" src="js/jquery.featureCarousel.js"></script>
也想出现在这里?联系我们
创客主机

然后需要引入 featureCarousel.css 文件

  1. <link  rel="stylesheet" href="css/featureCarousel.css"  charset="utf-8">

HTML 结构:

html 的结构如下,你需要为每个存放图片的 div 设置 class 为 feature。并且给外围的 div 设定 id 为 featureCarousel,修改这个结构可能会得到意想不到的结果。

  1. <div id="featureCarousel">
  2.     <div class="feature">
  3.         <img alt="Image Caption" src="image1.jpg">
  4.         <div>
  5.             <p>
  6.                 This is some information that can go along with an image.
  7.                 Anything can be placed here, including images.
  8.             </p>
  9.         </div>
  10.     </div>
  11.     <div class="feature">
  12.         <img alt="Image Caption" src="image2.jpg">
  13.         <div>
  14.             <p>
  15.                 This is some information that can go along with an image.
  16.                 Anything can be placed here, including images.
  17.             </p>
  18.         </div>
  19.     </div>
  20.     <div class="feature">
  21.         <img alt="Image Caption" src="image3.jpg">
  22.         <div>
  23.             <p>
  24.                 This is some information that can go along with an image.
  25.                 Anything can be placed here, including images.
  26.             </p>
  27.         </div>
  28.     </div>
  29.    </div>

调用插件:

以下是最基本的调用方式,参数全是默认值。

  1. <script type="text/javascript">
  2.     $("#featureCarousel").featureCarousel({
  3.         // include options like this:
  4.         // (use quotes only for string values, and no trailing comma after last option)
  5.         // option: value,
  6.         // option: value
  7.     });
  8. </script>

可用参数:

  1. // If zero, take original width and height of image
  2. // If between 0 and 1, multiply by original width and height (to get smaller size)
  3. // If greater than one, use in place of original pixel dimensions
  4. largeFeatureWidth :     0,
  5. largeFeatureHeight:  0,
  6. smallFeatureWidth:      .5,
  7. smallFeatureHeight:  .5,
  8. // how much to pad the top of the carousel
  9. topPadding:             20,
  10. // spacing between the sides of the container (pixels)
  11. sidePadding:            30,
  12. // the additional offset to pad the side features from the top of the carousel
  13. smallFeatureOffset:  50,
  14. // indicates which feature to start the carousel at
  15. startingFeature:        1,
  16. // speed in milliseconds it takes to rotate the carousel
  17. carouselSpeed:          1000,
  18. // time in milliseconds to set interval to autorotate the carousel
  19. // set to zero to disable it, negative to go left
  20. autoPlay:               0,
  21. // set to true to enable the creation of blips to indicate how many
  22. // features there are
  23. counterStyle:           1,
  24. // true to preload all images in the carousel before displaying anything
  25. preload:                true,
  26. // Will only display this many features in the carousel
  27. // set to zero to disable
  28. displayCutoff:          0,
  29. // an easing can be specified for the animation of the carousel
  30. animationEasing:        'swing'

通过上面的参数,你可以自定义轮播图的外观和 css 样式。

轮播图中的 3d 阴影和高光是通过样式表提供的。要修改背景色,只需要修改 featureCarousel 的 background。

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

已有 382 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!