码迷,mamicode.com
首页 > 其他好文 > 详细

太奇怪了吧!!

时间:2014-12-07 23:10:38      阅读:238      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   使用   sp   

可以 

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(); //移除最后一个元素

 }

完整的分步加载:

bubuko.com,布布扣
//起点值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;


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() {
        //这个不能一起隐藏,会使初始化的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];
    now = parseInt(($(firstItem).attr("id")).split("_")[1]);
    //if(now !== 2){
    $(".slidePics").append(itemsLeft[2]);
    //}
    moveLeft();

    itemsLeft.shift(); //移除最前一个元素 
    itemsLeft.push(lastItem); //新元素添加到数组结尾



}

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 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);



    //准备下一张
    $("#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");

    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);



    //准备下一张
    $("#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");


    now--;
    if (now < 1) {
        now = urls.length;
    }
}
额滴神啊!

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

太奇怪了吧!!

标签:style   blog   http   io   ar   color   os   使用   sp   

原文地址:http://www.cnblogs.com/haimingpro/p/4149991.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!