jquery.vm-carousel.js實現展示多個圖片的輪播效果
<script type="text/javascript" src="js/jquery.vm-carousel.js"></script>
//html程式碼(共9個li但只顯示5個!)
<div class="kxcl_con"> <ul class="vmcarousel-normal" > <li> <img src="image/index/kxcl1.jpg" width="240px" height="320px"> <div class="box"> <h3>PLA</h3> <div class="cltx">材料密度:1.3g/cm3</div> <div class="cltx">材料特性:PLA使用可再生的植物資源製成,是一種新型的生物基及可再生生物降解材料。熱穩定性好,加工溫度170—230攝氏度,良好的抗溶劑性。</div> </div> </li> <li> <img src="image/index/kxcl2.jpg" width="240px" height="320px"> <div class="box"> <h3>ABS</h3> <div class="cltx">材料密度:1.05g/cm3</div> <div class="cltx">材料特性:ABS具有優良的綜合物理和機械效能,極好的低溫抗衝擊性能。尺寸穩定性。電效能、耐磨性、抗化學藥品性、染色性、成品加工和機械加工較好。</div> </div> </li> </ul> </div>
//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 });