想要这种效果，就是数据是固定的，但是切换的时候，切换掉的数据会补到后面或前面去

roro5119 2015-10-17 09:45:37

就像极客学院底部那切换效果一样的，要怎么做呢？
我现在的代码是这样的：



 <!-- 合作院校 -->

        <div id="school">

            <div class="public-title">

                <a href="#" class="title">合作院校</a><a href="#" class="more-lesson">更多>></a>

            </div>

            <div class="slide-box-m">

                <span class="arrow-left"></span>

                <span class="arrow-right"></span>

                <div class="slide-box-m-box">

                    <div class="slide-box-inner">

                        <a href="#"><img src="images/partnersimg/1eb9dcb3193de807d21941b297483635.png"></a>

                        <a href="#"><img src="images/partnersimg/3c43d20c1649101e18c0ad2177611d76.png"></a>

                        <a href="#"><img src="images/partnersimg/618f17d0b155a1cb85f2a384e9652b79.png"></a>

                        <a href="#"><img src="images/partnersimg/3e20afc7934ef591297e6c9d377ed62a.png"></a>

                        <a href="#"><img src="images/partnersimg/c14635ad605aca1d593e1e52500945af.png"></a>

                        <a href="#"><img src="images/partnersimg/e4c3c8bbf9d5e56eeca9cc181d9abd48.png"></a>

                        <a href="#"><img src="images/partnersimg/496ab840e239a60c1bb4b1139268c54e.png"></a>

                    </div>

                </div>

            </div>

        </div>



/*slide*/

.slide-box{overflow: hidden;position: relative;width: 570px;height: 305px;float: left;margin-left: 8px;

}



.slide-box .arrow-left,.slide-box-m .arrow-left{

position: absolute;

  left: 0;

  top: 50%;

  margin-top: -25px;

  width: 40px;

  height: 50px;

  display: block;

  background: url(../images/banner-left_fe0df34.png) -10px -5px no-repeat;z-index: 99;opacity: 0;transition:1s opacity linear;cursor: pointer;

}

.slide-box .arrow-left:hover{

     background: url(../images/banner-left_fe0df34.png) -10px -65px no-repeat;

}



.slide-box .arrow-right,.slide-box-m .arrow-right{

position: absolute;

  right: 0;

  top: 50%;

  margin-top: -25px;

  width: 40px;

  height: 50px;

  display: block;

  background: url(../images/banner-right_a0bdd7d.png) -10px -5px no-repeat;z-index: 99;opacity: 0;transition:1s opacity linear;cursor: pointer;

}

.slide-box .arrow-right:hover,.slide-box-m:hover .arrow-right{

    background: url(../images/banner-right_a0bdd7d.png) -10px -65px no-repeat;

}

.slide-box:hover .arrow-left,.slide-box:hover .arrow-right,.slide-box-m:hover .arrow-left,.slide-box-m:hover .arrow-right{opacity: 1;}

.slide-nav{position: absolute;bottom: 15px;width: 100%;text-align: center;left: 0;}

.slide-nav span{

    display: inline-block;

  width: 39px;

  height: 7px;margin: 0 6px;

  cursor: pointer;

  background: url(../images/swiper1_6a811bf.jpg) no-repeat;

}

.slide-nav span.switch{

  background: url(../images/swiper2_78fab30.jpg) no-repeat;

}

.slide-img{position: absolute;top: 0;width: 3000px;}

.slide-img a{float: left;}

   mediaIndex = 0;

    schoolIndex = 0;



    //合作院校切换

    $("#school .arrow-right,#school .arrow-left").click(function() {

        var o = $("#school");

        if ($(this).attr("class") == "arrow-right") {

            schoolIndex++;

        } else {

            schoolIndex--;

        }

        cardScroll(o,140);

    });



    //媒体报道切换

    $("#media .arrow-right,#media .arrow-left").click(function() {

        var o = $("#media");

        if ($(this).attr("class") == "arrow-right") {

            mediaIndex++;

        } else {

            mediaIndex--;

        }

        cardScroll(o, 160);

    });



    //共用滚动

    function cardScroll(o, w) {

        var id = o.attr("id");

        if (id == "school") {

            o.find(".slide-box-inner").animate({

                left: -w * schoolIndex

            });

        } else {

            o.find(".slide-box-inner").animate({

                left: -w * mediaIndex

            });

        }



    }