jquery 3d Carousel轮播图插件

jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件。该jquery Carousel轮播图插件兼容ie8浏览器，提供丰富的参数和API方法由于控制Carousel，使用简单，非常实用。它的特点还有：

• 支持水平或垂直Carousel轮播。
• 可以通过键盘来控制前后轮播。
• 图片移动时提供回调函数钩子。
• 支持不同尺寸的图片。
• 支持图片边部透明效果。
• 支持无缝滚动。
• 兼容Chrome, FireFox, Safari 和 IE7+浏览器。

使用方法

在页面中引入jquery和jquery.waterwheelCarousel.min.js文件。

<script src="js/jquery.min.js"></script>                           
<script src="js/jquery.waterwheelCarousel.min.js"></script>                               
                

HTML结构

使用一个<div>来作为容器，里面放置一组图片。

<div id="carousel">
  <img src="/image1.jpg" alt="Image 1" />
  <img src="/image2.jpg" alt="Image 2" />
  <img src="/image3.jpg" alt="Image 3" />
  <img src="/image4.jpg" alt="Image 4" />
  <img src="/image5.jpg" alt="Image 5" />
</div>
                

CSS样式

为carousel指定下面的CSS样式。

<style type="text/css">
  #carousel {
    width:800px;
    height: 300px;
    display: relative;
  }
  #carousel img {
    display: hidden; /* hide images until carousel prepares them */
    cursor: pointer; /* not needed if you wrap carousel items in links */
  }
</style>                  
                

初始化插件

在页面DOM元素加载完毕之后，通过下面的方法来初始化该Carousel轮播图插件。

$(document).ready(function() {
    $("#carousel").waterwheelCarousel({
      // include options like this:
      // (use quotes only for string values, and no trailing comma after last option)
      // option: value,
      // option: value
    });
  });
                

配置参数

该jquery Carousel轮播图插件的可用配置参数有：

jQuery-Waterwheel-Carousel 3d Carousel轮播图插件的github地址为：https://github.com/bkosborne/jQuery-Waterwheel-Carousel