基于jQuery的移动轮播图(支持触屏)
移动轮播图我看到两款,
一款是无线天猫的m.tmall.com,实现了无缝轮播。
一款是蘑菇街的,没有实现无缝轮播。
我自己重写一个,类似蘑菇街
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基于jQuery的移动轮播图(支持触屏)</title> <style type="text/css"> .WSCSlideWrapper{ width: 420px; height: 180px; position: relative; overflow: hidden; } .WSCSlide{ width: 1680px; height: 100%; font-size: 0; position: absolute; -webkit-transform:translate3d(0,0,0); } .WSCSlideTransition{ -webkit-transition: all 0.5s 0s ease-in-out; } .WSCSlide_img{ width: 420px; height: 180px; } </style> </head> <body> <div class="WSCSlideWrapper"> <div class="WSCSlide WSCSlideTransition"> <img class="WSCSlide_img" src="1.jpg" /> <img class="WSCSlide_img" src="2.jpg" /> <img class="WSCSlide_img" src="3.jpg" /> </div> <div class="WSCSlideStatus"></div> </div> <script type="text/javascript" src="jquery-2.1.0.min.js"></script> <script type="text/javascript"> // 基于jQuery的移动端轮播插件,用zepto会有with问题 // 返回值 轮播对象 // 参数: // WSCSlideTransition Transition的class名 // WSCSlideWrapper 轮播的jQuery对象 // WSCSlide 包裹轮播图片jQuery对象 // WSCSlide_img 轮播图片列表jQuery对象 // timerNum 循环时间 function WSCMobileSlide(arg_obj) { /* 参数: el是jQuery选择器 返回值: matrix.m41是x值 number matrix.m42是y值 number 参考链接 http://stackoverflow.com/questions/5968227/get-the-value-of-webkit-transform-of-an-element-with-jquery 参考链接 https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html#//apple_ref/javascript/instp/WebKitCSSMatrix/m41 */ function getTransform(el) { var style = window.getComputedStyle($(el).get(0)); var matrix = new WebKitCSSMatrix(style.webkitTransform); return matrix; } function slideAnimate(x, y) { if (Math.abs(x) >= y) { // $(".WSCSlide").removeClass("WSCSlideTransition"); $(".WSCSlide").css("-webkit-transform", "translate3d(0,0,0)"); } else { // $(".WSCSlide").addClass("WSCSlideTransition"); $(".WSCSlide").css("-webkit-transform", "translate3d(" + x + "px,0,0)"); } } function getSlideTimer(timeNum) { if(typeof(timeNum) == "undefined"){ timeNum = 3000; } var slideTimer = setInterval(function() { var x = getTransform(".WSCSlide").m41; x = x - ImgWidth; slideAnimate(x, endPosition); }, timeNum); return slideTimer; } function touchDragMe($element) { var gundongX = 0; var gundongY = 0; var d = document; var g = 'getElementById'; var moveEle = $element; var stx = sty = etx = ety = curX = curY = 0; moveEle.on("touchstart", function(event) { //touchstart $element.removeClass(transitionName); clearInterval(slideTimer); var event = event.originalEvent; gundongX = 0; gundongY = 0; // 元素当前位置 etx = parseInt(getT3d(moveEle, "x")); ety = parseInt(getT3d(moveEle, "y")); // 手指位置 stx = event.touches[0].pageX; sty = event.touches[0].pageY; }); moveEle.on("touchmove", function(event) { var event = event.originalEvent; // 防止拖动页面 event.preventDefault(); // 手指位置 减去 元素当前位置 就是 要移动的距离 gundongX = event.touches[0].pageX - stx; gundongY = event.touches[0].pageY - sty; // 目标位置 就是 要移动的距离 加上 元素当前位置 curX = gundongX + etx; curY = gundongY + ety; // 自由移动 // moveEle.style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + (curY) + 'px,0px)'; // 只能移动Y轴方向 // var realMoveEle = moveEle[0]; moveEle[0].style.webkitTransform = 'translate3d(' + (curX) + 'px, ' + 0 + 'px,0px)'; }); moveEle.on("touchend", function(event) { // 手指接触屏幕的位置 var oriX = etx; var oriY = ety; // 手指离开屏幕的位置 etx = curX; ety = curY; var slidePosition = 0; for (var i = 0; i < ImgWidth_arr_length - 1; i++) { if (Math.abs(etx) > ImgWidth_arr[i]) { if (oriX > etx) { // 左滑 slidePosition = -ImgWidth_arr[i + 1]; } else { // 右滑 slidePosition = -ImgWidth_arr[i]; } } } $element.addClass(transitionName); slideAnimate(slidePosition, endPosition); slideTimer = getSlideTimer(timerNum); }); function getT3d(elem, ename) { var elem = elem[0]; var str1 = elem.style.webkitTransform; if (str1 == "") return "0"; str1 = str1.replace("translate3d(", ""); str1 = str1.replace(")", ""); var carr = str1.split(","); if (ename == "x") return carr[0]; else if (ename == "y") return carr[1]; else if (ename == "z") return carr[2]; else return ""; } } var transitionName = arg_obj["WSCSlideTransition"] || "WSCSlideTransition"; var $WSCSlideWrapper = arg_obj["WSCSlideWrapper"] || $(".WSCSlideWrapper"); var $WSCSlide = arg_obj["WSCSlide"] || $(".WSCSlide"); var $WSCSlide_img = arg_obj["WSCSlide_img"] || $(".WSCSlide_img"); var timerNum = arg_obj["timerNum"] || 3000; $WSCSlide_img.width($WSCSlideWrapper.width()); $WSCSlide_img.height($WSCSlideWrapper.height()); var ImgWidth_arr_length = $WSCSlide_img.length; var ImgWidth = $WSCSlide_img.width(); $WSCSlide.width(ImgWidth * ImgWidth_arr_length); var WSCSlideWidth = $WSCSlide.width(); // 轮播图终止位置 var endPosition = WSCSlideWidth - ImgWidth; var ImgWidth_arr = []; for (var i = 0; i < ImgWidth_arr_length; i++) { ImgWidth_arr.push(i * ImgWidth); } // console.log(ImgWidth_arr); var slideTimer = getSlideTimer(timerNum); touchDragMe($WSCSlide, slideTimer); return slideTimer; } WSCMobileSlide({ "WSCSlideTransition": "WSCSlideTransition", "WSCSlideWrapper": $(".WSCSlideWrapper"), "WSCSlide": $(".WSCSlide"), "WSCSlide_img": $(".WSCSlide_img"), "timerNum": 3000 }); </script> </body> </html>
合乎自然而生生不息。。。