jQuery+CSS3实现手风琴效果幻灯片

使用方法

引入js文件和样式表

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300,300italic' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 

HTML主体代码

<section class="main">

    <div class="ia-container">

        <figure>
            <img src="images/1.jpg" alt="image01" />
            <input type="radio" name="radio-set" checked="checked"/>
            <figcaption><span>True Colors</span></figcaption>

            <figure>
                <img src="images/2.jpg" alt="image02" />
                <input type="radio" name="radio-set" />
                <figcaption><span>Honest Light</span></figcaption>

                <figure>
                    <img src="images/3.jpg" alt="image03" />
                    <input type="radio" name="radio-set" />
                    <figcaption><span>Silent Serenity</span></figcaption>

                    <figure>
                        <img src="images/4.jpg" alt="image04" />
                        <input type="radio" name="radio-set" />
                        <figcaption><span>Warm Welcome</span></figcaption>

                        <figure>
                            <img src="images/5.jpg" alt="image05" />
                            <input type="radio" name="radio-set" />
                            <figcaption><span>Sensible Magic</span></figcaption>

                            <figure>
                                <img src="images/6.jpg" alt="image06" />
                                <input type="radio" name="radio-set" />
                                <figcaption><span>Lovely Midnight</span></figcaption>

                                <figure>
                                    <img src="images/7.jpg" alt="image07" />
                                    <input type="radio" name="radio-set" />
                                    <figcaption><span>Illuminated Darkness</span></figcaption>                                          

                                    <figure>
                                        <img src="images/8.jpg" alt="image08" />
                                        <input id="ia-selector-last" type="radio" name="radio-set" />
                                        <figcaption><span>Happy Child</span></figcaption>
                                    </figure>

                                </figure>

                            </figure>   

                        </figure>   

                    </figure>

                </figure>

            </figure>

        </figure>

    </div><!-- ia-container -->

</section>
更新时间 2020-06-29 21:26:19,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要1A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论