<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
});