jQuery图片旋转木马插件jquery.caroursel.js

使用方法：

引入CSS样式文件

<link type="text/css" rel="stylesheet" href="css/carousel.css">

引入JQuery库文件、插件JS文件

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jquery.carousel.js"></script>

插件初始化、参数配置

Caroursel.init($('.caroursel'));

HTML结构部分

<article class="sucainiu-container">
    <div class = "caroursel poster-main" data-setting = '{
        "width":1000,
        "height":270,
        "posterWidth":640,
        "posterHeight":270,
        "scale":0.8,
        "dealy":"2000",
        "algin":"middle"
    }'>
        <ul class = "poster-list">
            <li class = "poster-item"><img src="image/1.jpg" width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/2.jpg" width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/3.jpg" width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/4.jpg" width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/5.jpg" width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/6.jpg"  width = "100%" height="100%"></li>
            <li class = "poster-item"><img src="image/1.jpg"  width = "100%" height="100%"></li>
        </ul>
        <div class = "poster-btn poster-prev-btn"></div>
        <div class = "poster-btn poster-next-btn"></div>
    </div>
</article>