1. 程式人生 > >jquery.vm-carousel.js實現展示多個圖片的輪播效果

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