自己写的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;
    }
}

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

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

苦逼的没有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;
     800px;
    height: 480px;
    display: none;
}
.animate{
    display: block;
    -webkit-transition: 0.7s ease-out all;
}

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

.mediaSelf div{
     800px;
    height: 394px;
    display: block;

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

}
.mediaSelf img{
    position: relative;
    height: 100%;
     auto;
    margin: 0 auto;
}

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

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