首页学习－－点击按钮，图片滚动向前

1 效果大概是这样：鼠标移动到左边第一个小圆点，3个图片，鼠标移动到第二个小圆点，整体左移，剩余2张

大概思路吧：

 外层1000px overflow:hidden ,内层 宽度2000px，起到隐藏的作用，整体relative，浮动上去的时候，内层left移动一个图片＋margin的距离，还有就是所有图片左边margin，内层整体margin取负值

html代码：

<section className="g-section g-special" id="special">
        <div className="c-layout">
            <div className="m-shadow-title">
                <div className="u-shadow">SPECIALITY</div>
                <h1>特色服务</h1>
            </div>
            <div className="m-special-content clearfix">
                <div className="wrap-special-list">
                    <div className="special-list">
                        <div className="special-img">
                            <img src="images/special1.png" />
                        </div>
                        <h2>
                            <a href="/special_declare">报关代理</a>
                        </h2>
                    </div>

                    <div className="special-list">
                        <div className="special-img">
                            <img src="images/special2.png" />
                        </div>
                        <h2>
                            <a href="/spec_cargoInsurance">货运保险</a>
                        </h2>
                    </div>

                    <div className="special-list special-list-more">
                        <div className="special-img">
                            <img src="images/special4.png" />
                        </div>
                        <h2>
                            <a href="/spec_equipmentLease">设备租赁</a>
                        </h2>
                    </div>

                </div>
            </div>
            <div className="m-special-btn">
                <a href="javascript:;" className="active"></a>
                <a href="javascript:;"></a>
            </div>
        </div>
    </section>

CSS部分

.m-special-content{
    overflow: hidden;
    padding: 20px 0px;
    margin: -20px 0px -20px 0px;
}
.m-special-content .wrap-special-list{
    margin-left: -20px;
    position: relative;
    width: 2000px;
}
.m-special-content .special-list{
    width:320px;
    height:240px;
    float:left;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    margin-left: 20px;
}
.m-special-content .special-list:hover{
    position:relative;
    top:-2px;
    -moz-box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
    -webkit-box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
    box-shadow: 0 0px 30px 0 rgba(88,123,179,0.3);
}
.m-special-content .special-img{
    height: 180px;
    overflow:hidden;
}
.m-special-content .special-img img{
    width:100%;
    height:100%;
}
.m-special-content .special-list h2{
    height: 60px;
    background: #fff;
    line-height: 60px;
    text-align: center;
}
.m-special-content .special-list h2 a{
    color:#333;
}
.m-special-btn{
    margin-top: 25px;
    text-align:center;
    display:block;
}
.m-special-btn a{
    display:inline-block;
    width:12px;
    height:12px;
    margin: 5px;
    background:url(../../images/sprite.png) -297px -178px no-repeat;
}
.m-special-btn a:hover,.m-special-btn a.active{
    background-position: -271px -178px;
}

js部分

speService: function(){    //特色服务
            $('#special .m-special-btn a').hover(function(){
                var index = $(this).index();

                $(this).addClass('active').siblings().removeClass('active');
                if(index == 0){
                    $('#special .wrap-special-list').animate({'left':'0px'});
                }else if(index == 1){
                    $('#special .wrap-special-list').animate({'left':'-340px'});
                }
            });
        },