jquery.vm-carousel.js实现展示多个图片的轮播效果

<script type="text/javascript" src="js/jquery.vm-carousel.js"></script>

//html代码(假设共10个li但只显示5个！)
        <ul class="vmcarousel-normal" >
            <li>
                <img src="image/index/kxcl1.jpg" width="240px" height="320px">

           //图片所对应的解释文字
                <div class="box">
                    <h3>PLA</h3>
                    <div class="cltx">描述一：。。。</div>
                    <div class="cltx">描述二：。。。</div>
                </div>
            </li>
            <li>
                <img src="image/index/kxcl2.jpg" width="240px" height="320px">
                <div class="box">
                    <h3>ABS</h3>
                    <div class="cltx">描述一：。。。</div>
                    <div class="cltx">描述二：。。。</div>
                </div>
            </li>
        </ul>
  

//js代码

//滑过每张图片显示遮罩层以及相对应的数据

    $('.vmcarousel-normal li').hover(function(){
        $(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
    },function(){
        $(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
    });

//轮播效果
    $('.vmcarousel-normal').vmcarousel({
        centered: false,
        start_item: 0,
        autoplay: false,
        infinite: false
    });