移动web中的幻灯片切换效果
浏览数：29 /
时间：2015年06月11日
百度或者谷歌下类似的插件有很多，原理都差不多，关键适合自己的项目，如果移动端要引入jquery这么大的插件，只能呵呵了....
下面是工作中针对webkit内核的浏览器写的，html很简单：
<section id="banner" class="banner z-c" > <ul class="z-c-w">
<li class="z-c-i"></li>
</ul> </section>
上面的li标签实际都可以动态生成的，这里只是为了方便阅读才加上。
css:
.banner { position:relative; overflow:hidden; border-bottom:1px solid #FFFDFB; font-size:0; } .z-c-w { display:-webkit-box; width:100%; height:100%; } .z-c-w.transitionable { -webkit-transition:-webkit-transform 0.25s ease; } .z-c-i { display:block; width:100%; } .z-c-p { position: absolute; margin-top: -13px; width: 100%; text-align: center; } .z-c-p span { display:inline-block; width:6px; height:6px; margin:0 4px; border-radius:50%; border:1px solid #7cca26; } .z-c-p span.active { background-color:#7cca26; } .z-c-i .img-wrapper{ display: inline-block; width:100%; height:100%; background: #fafafa url(‘../images/cart_icon.png‘) no-repeat center center; } .z-c-i a{display: block;} .z-c-i .img-wrapper img{width:100%;}
javascript:需要引入zepto，zepto压缩后不到10k，是移动端开发不错的js库。
/* * carousel */ ;(function($) { $.extend($.fn, { carousel : function(obj) { this.each(function(){ // 当前Zepto对象 var $self = $(this); var dom = { wrap : $self.find(".z-c-w"), items : $self.find(".z-c-i"), pageControl : null, pageItems : null }; var settings = { width : dom.wrap.width(), count : dom.items.size(), index : 0, startX : 0, startY : 0, movingX : false, movingY : false, distance : 0, pageControl : obj ? (obj.showControl ? true : false) : true, autoScroll : obj ? (obj.autoScroll ? true : false) : false }; var funs = { init : function() { funs.initUI(); funs.bindEvent(); if (settings.autoScroll) { settings.interval = setInterval(funs.autoScroll, 5000); } }, bindEvent : function() { dom.wrap.off().on({ "touchstart" : function(e) { //e.stopPropagation(); settings.width = dom.wrap.width(); settings.distance = settings.width / 4; settings.startX = e.touches[0].pageX; settings.startY = e.touches[0].pageY; if (settings.autoScroll){ clearInterval(settings.interval); //隐藏最后一个循环页 dom.dupItem.css("visibility", "hidden"); } }, "touchmove" : function(e) { //e.stopPropagation(); var currentX = e.touches[0].pageX; var currentY = e.touches[0].pageY; var dX = currentX - settings.startX; var dY = currentY - settings.startY; if (settings.movingX) { e.stopPropagation(); e.preventDefault(); var x = 0; if (settings.index == 0 && dX > 0 || settings.index == settings.count - 1 && dX < 0) { x = -settings.index * settings.width + dX / 3; } else { x = -settings.index * settings.width + dX; } dom.wrap.css("-webkit-transform", "translate3d(" + x + "px,0,0)"); } else if (!settings.movingY) { e.stopPropagation(); var dX = Math.abs(dX); var dY = Math.abs(dY); if (dX > 10 && dX/dY > 1) { settings.movingX = true; settings.movingY = false; } else if(dY > 10 && dX/dY < 1) { settings.movingY = true; settings.movingX = false; } } }, "touchend" : function(e) { //e.stopPropagation(); settings.movingY = false; if (settings.movingX) { settings.movingX = false; var currentX = e.changedTouches[0].pageX; var distance = currentX - settings.startX; if (Math.abs(distance) >= settings.distance) { settings.index = settings.index - Math.abs(distance) / distance; settings.index = settings.index < 0 ? 0 : (settings.index > (settings.count - 1) ? (settings.count - 1) : settings.index); } funs.continueMove(); } if (settings.autoScroll) { settings.interval = setInterval(funs.autoScroll, 5000); setTimeout(function(){ dom.dupItem.css("visibility", "visible"); },250); } }, "webkitTransitionEnd" : function() { dom.wrap.removeClass("transitionable"); if(settings.index >= settings.count){ settings.index %= settings.count; dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); } } }); dom.pageControl.off().on("touchstart", function(e) { settings.width = dom.wrap.width(); settings.distance = settings.width / 4; var touchX = e.touches[0].pageX; var currentX = $(dom.pageItems[settings.index]).offset().left; if (touchX > currentX && settings.index < (settings.count - 1)) { settings.index += 1; funs.continueMove(); } else if (touchX < currentX && settings.index > 0) { settings.index -= 1; funs.continueMove(); } }); $(window).on({ "resize" : function() { funs.adjustPOS(); }, "orientationchange" : function() { funs.adjustPOS(); } }); }, adjustPOS : function() { settings.width = dom.wrap.width(); settings.distance = settings.width / 5; dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, continueMove : function() { dom.wrap.addClass("transitionable"); dom.pageItems.removeClass("active"); $(dom.pageItems[settings.index % settings.count]).addClass("active"); dom.wrap.css("-webkit-transform", "translate3d(" + -settings.index * settings.width + "px,0,0)"); }, initUI : function() { settings.distance = settings.width / 4; if (settings.pageControl) { $self.append(funs.createPageDOM()); } dom.pageControl = $self.find(".z-c-p"); dom.pageItems = $self.find(".z-c-p>span"); if(settings.autoScroll){ //重复第一个页面用作尾部的循环 funs.dupFirstItem(); } }, dupFirstItem : function() { dom.dupItem = $self.find(".z-c-i:first-child").clone(); $(dom.wrap).append(dom.dupItem); }, createPageDOM : function() { var pageControlToRemove = $self.find(".z-c-p"); if (pageControlToRemove.length) { pageControlToRemove.remove(); } var pageFragment = document.createDocumentFragment(); var pageDiv = document.createElement("div"); pageDiv.setAttribute("class", "z-c-p"); pageFragment.appendChild(pageDiv); var pageItemSpan = document.createElement("span"); pageItemSpan.setAttribute("class", "active"); pageDiv.appendChild(pageItemSpan); for (var i = 1; i < settings.count; i++) { pageItemSpan = document.createElement("span"); pageDiv.appendChild(pageItemSpan); } return pageFragment; }, clear : function() { var pageControlToRemove = $self.find(".z-c-p"); if (pageControlToRemove.length) { pageControlToRemove.remove(); } dom.wrap.empty().css("-webkit-transform", "translate3d(0,0,0)"); }, autoScroll : function() { if(dom.wrap.width() > 0 && dom.items.width() > 0){ settings.index++; settings.width = dom.wrap.width(); funs.continueMove(settings.index); } } }; funs.init(); $self.clear = funs.clear; }); return this; } }); })(Zepto);
调用方法：
$("#banner").carousel({
showControl: true,
autoScroll: true
});
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
