t-2.手机端简单轮播（无滑动效果）

<div class="banner">

        <ul class="slide_ul">

            <li>

                <a href="#">

                    <img src="images/pc5.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc1.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc2.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc3.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc4.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc5.jpg" alt="">

                </a>

            </li>

            <li>

                <a href="#">

                    <img src="images/pc1.jpg" alt="">

                </a>

            </li>

        </ul>

</div>

 

/*无缝滑动轮播--start*/

.banner{

    width:6.4rem;

    height:3.12rem;

    position:relative;           /*给ul做定位用*/

    overflow:hidden;

}

/*banner img*/

.slide_ul{

    position:absolute;

    left:-6.4rem;

    width:44.8rem;                 /*增加图片重新修正width*/

    height:3.12rem;

}

.slide_ul li{

    display:block;

    float:left;

    width:6.4rem;

    height:3.12rem;

}

.slide_ul img{

    display:block;

    width:6.4rem;

    height:3.12rem;

}

 

.js

 

// 摆放顺序 5123451  方便左右不同方向轮播

var index=1 ;

function auto(){

    index++;

    $(".slide_ul").animate({"left":-6.4*index+"rem"},500,

                                           //轮播转换一张用时

        function(){

            if(index===6){         //6=总添加照片张数-1

                $(".slide_ul").css("left","-6.4rem");

                index=1;

            }

        }

    )

}

//每三秒轮播一次

timer=setInterval("auto()",3000);