自己写的carousel

可以 

function appendRight() {



  //alert("right");



  lastItem = itemsRight[urls.length - 1];



  firstItem = itemsRight[1];



  now = parseInt(($(lastItem).attr("id")).split("_")[1]);



 



  $(".slidePics").prepend(itemsRight[urls.length - 2]);



  moveRight();



  itemsRight.unshift(firstItem); //新元素添加到数组开始



  itemsRight.pop(); //移除最后一个元素



 }

 

 

太奇怪了吧！！！！！！！！！！！！！！！！！

 

 

不可以

 

function appendRight() {



  //alert("right");



  lastItem = itemsRight[urls.length - 2];



  firstItem = itemsRight[1];



  now = parseInt(($(lastItem).attr("id")).split("_")[1]);



 



  $(".slidePics").prepend(lastItem);



  moveRight();



  itemsRight.unshift(firstItem); //新元素添加到数组开始



  itemsRight.pop(); //移除最后一个元素



 }

完整的分步加载：

//起点值start

var start;



$('.slidePics').on("touchstart", getStart, this);

$('.slidePics').on("touchmove", getDirection, this);

$('.slidePics').on("touchend", updateUrl, this);



var urls = ["img/t4_01.jpg", "img/t4_02.jpg", "img/t4_03.jpg", "img/t4_04.jpg", "img/t4_05.jpg"];

var itemsLeft = [];

var itemsRight = [];

var left = false;

var firstItem = null;

var lastItem = null;

var now;

var switchLeft = false;

var switchRight = false;

var touched = false;



if (urls.length > 1) {

    for (var i = 1; i <= urls.length; i++) {

        var itemleft = '<div class="event_one animate" style="left:800px;" id="event_' + i + '">' +

            '<div class="imgInfo">' + i + '/' + urls.length + '</div>' +

            '<div class="mediaSelf">' +

            '<img src="' + urls[i - 1] + '">' +

            '</div>' +

            '</div>' +

            '</div>';

        var itemright = '<div class="event_one animate" style="left:-800px;" id="event_' + i + '">' +

            '<div class="imgInfo">' + i + '/' + urls.length + '</div>' +

            '<div class="mediaSelf">' +

            '<img src="' + urls[i - 1] + '">' +

            '</div>' +

            '</div>' +

            '</div>';

        itemsLeft.push(itemleft);

        itemsRight.push(itemright);

    }



}





function getStart(e) {

    start = parseInt(e.targetTouches[0].pageX);

}



function getDirection(e) {

    var move = parseInt(e.targetTouches[0].pageX);

    if (start < move) {

        left = false;

    } else if (start > move) {

        left = true;

    }

}



function updateUrl() {

    if (!touched) {

        touched = true;

        //这个不能一起隐藏，会使初始化的3个div也被取消动画

        //$(".event_one").removeClass("animate");

        if ($('.event_one').length < urls.length) {

            if (left) {

                appendLeft();

            } else {

                appendRight();

            }

        } else {

            //alert("finished");

            if (left) {

                moveLeft();

            } else {

                moveRight();

            }

        }

    }

}



function appendLeft() {

    //alert("left");

    lastItem = itemsLeft[urls.length - 1];

    firstItem = itemsLeft[1];



    if (!switchRight) {

        now = parseInt(($(firstItem).attr("id")).split("_")[1]);

        $(".slidePics").append(itemsLeft[2]);

        switchLeft = true;

    } else {

        $(".slidePics").append(itemsRight[2]);

        switchLeft = false;

    }





    //动作在append计数之前

    moveLeft();



    itemsLeft.shift(); //移除最前一个元素 

    itemsLeft.push(lastItem); //新元素添加到数组结尾







}



function appendRight() {



    lastItem = itemsRight[urls.length - 1];

    firstItem = itemsRight[1];

    if (!switchLeft) {

        now = parseInt(($(lastItem).attr("id")).split("_")[1]);

        $(".slidePics").prepend(itemsRight[urls.length - 2]);





        switchRight = true;

    } else {



        $(".slidePics").prepend(itemsLeft[urls.length - 2]);

        switchRight = false;

    }





    //动作在append计数之前

    moveRight();



    itemsRight.unshift(firstItem); //新元素添加到数组开始

    itemsRight.pop(); //移除最后一个元素





}





function moveLeft() {

    var next = now > urls.length - 1 ? 1 : now + 1;

    var pre = now <= 1 ? urls.length : now - 1;



    console.log("pre", pre, "now", now, "next", next, switchRight, "touched", touched);





    //准备下一张

    $("#event_" + next).addClass("animate");

    $("#event_" + next).css("left", "800px");



    //移入

    //$("#event_"+now).css("left","800px");

    $("#event_" + now).addClass("animate");

    $("#event_" + now).css("left", "0px");





    //移出正常

    //$("#event_" + pre).addClass("animate");

    $("#event_" + pre).css("left", "-800px");

    //经测试，以下两句即可避免使用全部remove

    $("#event_" + (pre - 1)).removeClass("animate");

    $("#event_" + (next + 1)).removeClass("animate");



    touched = false;

    now++;

    if (now > urls.length) {

        now = 1;

    }

}



function moveRight() {

    var pre = now > urls.length - 1 ? 1 : now + 1;

    var next = now <= 1 ? urls.length : now - 1;

    console.log("pre", pre, "now", now, "next", next, switchLeft, "touched", touched);







    //准备下一张

    $("#event_" + next).addClass("animate");

    $("#event_" + next).css("left", "-800px");



    //移入

    //$("#event_"+now).css("left","-800px");

    $("#event_" + now).addClass("animate");

    $("#event_" + now).css("left", "0px");



    //移出正常

    //$("#event_" + pre).addClass("animate");

    $("#event_" + pre).css("left", "800px");

    //经测试，以下两句即可避免使用全部remove

    $("#event_" + (pre + 1)).removeClass("animate");

    $("#event_" + (next - 1)).removeClass("animate");



    touched = false;

    now--;

    if (now < 1) {

        now = urls.length;

    }

}

本地分步carousel

双向切换的时候有一步延迟，连续点击还没有很有效的屏蔽。

就是由于上面那个奇怪的不同，搞了很多天。

苦逼的没有animate()方法，硬生生的用css3:

html一开始就加载3张图片：

<div class="slidePics">

    <div class="event_one event_5 animate" style="left:-800px;" data-id="event_5">

            <div class="imgInfo">5/5</div>

            <div class="mediaSelf">

                <div style="background-image:url(img/t4_05.jpg)"></div>

            </div>

    </div>

    <div class="event_one event_1 animate" data-id="event_1">

            <div class="imgInfo">1/5</div>

            <div class="mediaSelf">

                <div style="background-image:url(img/t4_01.jpg)"></div>

            </div>

    </div>

    <div class="event_one event_2 animate" style="left:800px;" data-id="event_2">

            <div class="imgInfo">2/5</div>

            <div class="mediaSelf">

                <div style="background-image:url(img/t4_02.jpg)"></div>

            </div>

    </div>

</div>

<div class="slideBack">

    <div></div>

</div>

初始模板

下面那个back独立在外面absolute，index较高，用来接受返回按钮的事件。

.event_one{

    position: absolute;

    left: 0;

    width: 800px;

    height: 480px;

    display: none;

}

.animate{

    display: block;

    -webkit-transition: 0.7s ease-out all;

}

图片的居中问题用img tag或者背景做分别是：

.mediaSelf div{

    width: 800px;

    height: 394px;

    display: block;

　　background-size: contain;
　　background-repeat: no-repeat;
　　background-position: center;

}

.mediaSelf img{

    position: relative;

    height: 100%;

    width: auto;

    margin: 0 auto;

}

如果用img tag，需要js把图片等比例缩放以后，除以二居中。

css的比较简单，background-size: contain;但也做不到垂直居中，只是把图片完整显示出来。