用jQuery创建滑动相册

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

也许你还喜欢