效果很炫,使用方法很简单
引用相关文件
<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(){}
})
})