可折叠式滑动展示图片 according slides images show

accordion-slides.html

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
    .slides{
        margin: 0;
        padding: 0;
        list-style-type: none;
        height: 220px;
        /*width: 802px;*/
    }
    .slides li{
        width: 100px;
        float: left;
        display: block;
        overflow: hidden;
    }
    .slides li:first-child{
        width: 502px;
    }
</style>
<ul class="slides">
    <li>
        <a href="javascript:void(0)"><img src="http://img10.360buyimg.com/da/g13/M08/14/19/rBEhU1J28lYIAAAAAAC6aRY5rDUAAE9SAFN3IsAALqB529.jpg" alt=""></a>
    </li>
    <li>
        <a href="javascript:void(0)"><img src="http://img10.360buyimg.com/da/g14/M07/19/08/rBEhVlJ0X-wIAAAAAABxFNw0h80AAE79gE-EdIAAHEs267.jpg" alt=""></a>
    </li>
    <li>
        <a href="javascript:void(0)"><img src="http://img14.360buyimg.com/da/g14/M07/19/08/rBEhV1J0YGoIAAAAAACVJjIbnKgAAE79wMU5CUAAJU-845.jpg" alt=""></a>
    </li>
    <li>
        <a href="javascript:void(0)"><img src="http://img13.360buyimg.com/da/g15/M04/13/07/rBEhWVJ0YK8IAAAAAACuQFDf60wAAE47wBpySQAAK5Y928.jpg" alt=""></a>
    </li>
</ul>
<script type="text/javascript">
    $(".slides li").click(function(){
        var item = $(this);
        item.siblings().animate({width:100});
        item.animate({width:502});
    })
</script>