分享一款基于jQuery幻燈片插件SkitterSlideshow是一款支持38種不同的幻燈片過渡動畫效果，以及兩種不同類型的導(dǎo)航按鈕，并且它提供了大量的配置參數(shù)用于控制幻燈片的顯示。效果圖如下：
在線預(yù)覽 源碼下載
實(shí)現(xiàn)的代碼。
html代碼：
<div class="htmleaf-container"> <div id="page"> <div id="content"> <div class="border_box"> <div class="box_skitter box_skitter_large"> <ul> <li><a href="http://www.w2bc.com/shili/"><img src="images/example/001.jpg" class="circles" /></a><div class="label_text"><p>愛編程www.w2bc.com</p></div></li> <li><a href="http://www.w2bc.com/shili/"><img src="images/example/002.jpg" class="circlesInside" /></a><div class="label_text"><p>愛編程www.w2bc.com</p></div></li> <li><a href="http://www.w2bc.com/shili/"><img src="images/example/003.jpg" class="circlesRotate" /></a><div class="label_text"><p>愛編程www.w2bc.com</p></div></li> <li><a href="http://www.w2bc.com/shili/"><img src="images/example/004.jpg" class="cubeShow" /></a><div class="label_text"><p>愛編程www.w2bc.com</p></div></li> </ul> </div> </div> </div> </div> </div> <script src="js/jquery-2.1.1.min.js" type="text/javascript"></script> <script type="text/Javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.skitter.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.box_skitter_large').skitter({ theme: 'default', dots: true, PReview: true, numbers_align: 'center' }); }); </script>
via:http://www.w2bc.com/article/61877
新聞熱點(diǎn)
疑難解答
