百度或者谷歌下类似的插件有很多，原理都差不多，关键适合自己的项目，如果移动端要引入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
});
时间： 2024-10-30 06:18:50