首页 > 代码库 > 太奇怪了吧!!
太奇怪了吧!!
可以
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(); //移除最后一个元素 }
完整的分步加载:
//起点值startvar 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="http://www.mamicode.com/‘ + 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="http://www.mamicode.com/‘ + 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; }}
就是由于上面那个奇怪的不同,搞了很多天。
太奇怪了吧!!
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。