jQuery和CSS3制作的手风琴图片切换

你有没有使用普通手风琴插件在你的项目中,我相信,是的,和,其中大部分是使用javascript(或jQuery)工作。
通常我们使用这些插件(手风琴)建立一个宣传图片,一个小相册,或如果我们要建立一个广告与产品特性的列表。
我们做了一些研究,得出的结论是,有时我们不需要使用任何脚本,以构建一个手风琴导航中。
我们可以处理OnClick事件和使用自定义动画。
引用相关文件

 <!-- CSS files -->
        <link href="css/layout.css" rel="stylesheet" />
        <link href="css/liteaccordion.css" rel="stylesheet" />

        <!-- jQuery -->        
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

        <!-- jQuery easing -->
        <script src="js/jquery.easing.1.3.js"></script>

        <!-- liteAccordion jQuery library -->
        <script src="js/liteaccordion.jquery.js"></script>
HTML
 <div id="js_version" class="accordion">
            <ol>
                <li data-slide-name="slide1">
                    <h2><span>Slide One</span></h2>
                    <div>
                        <img src="images/1.jpg" alt="Slide One" />
                    </div>
                </li>
                <li data-slide-name="slide2">
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <img src="images/2.jpg" alt="Slide Two" />
                    </div>
                </li>
                <li data-slide-name="slide3">
                    <h2><span>Slide Three</span></h2>
                    <div>
                        <img src="images/3.jpg" alt="Slide Three" />
                    </div>
                </li>
                <li data-slide-name="slide4">
                    <h2><span>Slide Four</span></h2>
                    <div>
                        <img src="images/4.jpg" width="768" alt="Slide Four" />
                    </div>
                </li>
                <li data-slide-name="slide5">
                    <h2><span>Slide Five</span></h2>
                    <div>
                        <img src="images/5.jpg" alt="Slide Five" />
                    </div>
                </li>
            </ol>
            <noscript>
                <p>Please enable JavaScript to get the full experience.</p>
            </noscript>
        </div>
        <a href="index2.html#slide1"><h2>Next (pure CSS3 version)</h2></a>
JS调用
 <script>
            $(document).ready(function(){
                $('#js_version').liteAccordion({
                    theme : 'dark',
                    rounded : true,
                    enumerateSlides : true,
                    firstSlide : 1,
                    linkable : true,
                    easing: 'easeInOutSine'
                });
            });
        </script>