效果很炫，使用方法很简单引用相关文件 <link href="css/layout.css" rel="stylesheet" type="text/css" /> <link href="css/chopslider.css" rel="stylesheet" type="text/css" /> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.id.chopslider-2.2.0.free.min.js"></script> <script src="js/jquery.id.cstransitions-1.2.min.js"></script> <script src="js/main.js"></script>
HTML代码 <div class="container"> <div class="wrapper"> <div class="s-shadow-b"> </div> <a id="slide-next" href="#"></a><a id="slide-prev" href="#"></a> <div id="slider"> <div class="slide cs-activeSlide"> <img src="slide_images/pic1.jpg" width="900" height="300" alt="photo #1" /> </div> .................... <div class="slide"> <img src="slide_images/pic7.jpg" width="900" height="300" alt="photo #7" /> </div> </div> <div class="pagination"> <span class="slider-pagination"></span><span class="slider-pagination"></span><span class="slider-pagination"></span><span class="slider-pagination"></span><span class="slider-pagination"> </span><span class="slider-pagination"></span><span class="slider-pagination"> </span> </div> <div class="slide-descriptions"> <div class="sl-descr"> Thailand, There are very many different ATM in one place</div> <div class="sl-descr"> All city colour is bright, nothing black</div> <div class="sl-descr"> Floating market. Shopping on river</div> <div class="sl-descr"> Sunset on Koh Phangan island</div> <div class="sl-descr"> Shortly before sunset</div> <div class="sl-descr"> Good sculpture on Koh Samui island</div> <div class="sl-descr"> That is such cute barmaid you can see here</div> </div> <div class="caption"> </div> </div> </div>
js调用jQuery(function(){ $("#slider").chopSlider({ /* slide element */ slide : ".slide", /* controlers */ nextTrigger : "a#slide-next", prevTrigger : "a#slide-prev", hideTriggers : true, sliderPagination : ".slider-pagination", /* captions */ useCaptions : true, everyCaptionIn : ".sl-descr", showCaptionIn : ".caption", captionTransform : "scale(0) translate(-600px,0px) rotate(45deg)", /* autoplay */ autoplay : true, autoplayDelay : 5000, /* for Browsers that support 3D transforms */ t3D : csTransitions['3DFlips']['random'], /* all will be picked up randomly */ t2D : [ csTransitions['multi']['random'], csTransitions['vertical']['random'] ], noCSS3 : csTransitions['noCSS3']['random'], mobile : csTransitions['mobile']['random'], onStart: function(){}, onEnd: function(){} })})
