323 خطوط
12 KiB
JavaScript
323 خطوط
12 KiB
JavaScript
/*
|
|
* 版权所有 (C) 2015 知启蒙(ZHIQIM) 保留所有权利。
|
|
*
|
|
* 指定登记&发行网站： https://www.zhiqim.com/ 欢迎加盟知启蒙，[编程有你，知启蒙一路随行]。
|
|
*
|
|
* 本文采用《知启蒙登记发行许可证》，除非符合许可证，否则不可使用该文件！
|
|
* 1、您可以免费使用、修改、合并、出版发行和分发，再授权软件、软件副本及衍生软件；
|
|
* 2、您用于商业用途时，必须在原作者指定的登记网站，按原作者要求进行登记；
|
|
* 3、您在使用、修改、合并、出版发行和分发时，必须包含版权声明、许可声明，及保留原作者的著作权、商标和专利等知识产权；
|
|
* 4、您在互联网、移动互联网等大众网络下发行和分发再授权软件、软件副本及衍生软件时，必须在原作者指定的发行网站进行发行和分发；
|
|
* 5、您可以在以下链接获取一个完整的许可证副本。
|
|
*
|
|
* 许可证链接：http://zhiqim.org/licenses/zhiqim_register_publish_license.htm
|
|
*
|
|
* 除非法律需要或书面同意，软件由原始码方式提供，无任何明示或暗示的保证和条件。详见完整许可证的权限和限制。
|
|
*/
|
|
|
|
|
|
+(function(Z)
|
|
{
|
|
|
|
/****************************************/
|
|
//“轮播图”
|
|
/****************************************/
|
|
Z.ZmSlider = Z.Class.newInstance();
|
|
Z.ZmSlider.prototype =
|
|
{
|
|
//start of Z.ZmSlider.prototype
|
|
defaults:
|
|
{//定义
|
|
elem: '', // 主容器
|
|
rectRatio: 2, // 宽度比例
|
|
playAuto: true, // 设定自动滚动
|
|
playSpeed: 2000, // 播放间隔
|
|
transDur: 300, // 动画时长
|
|
transFun: "ease", // 动画轨迹
|
|
},
|
|
init: function()
|
|
{//初始化
|
|
},
|
|
execute: function()
|
|
{//执行
|
|
//1：重新组装排版
|
|
this.$touch = Z.$elem(this.elem, "Z.ZmSlider").addClass("z-slider-touch");
|
|
|
|
this.$wrap = Z('<div class="z-slider z-bg-gray z-text-center"></div>').insertAfter(this.$touch);
|
|
this.$wrap.append(this.$touch);
|
|
this.$tab = Z('<div class="z-slider-tab"></div>').appendTo(this.$wrap);
|
|
this.$$items = this.$touch.children("li");
|
|
|
|
//2：基本参数
|
|
this.width = this.$wrap.offsetWidth();
|
|
this.height = this.width/this.rectRatio;
|
|
this.length = this.$$items.length;
|
|
if (this.rectRatio < 0){
|
|
this.rectRatio = 2;
|
|
}
|
|
if (this.playSpeed < this.transDur){
|
|
this.playSpeed = this.transDur;
|
|
}
|
|
|
|
//3：插入展示按钮html
|
|
var btnsHtml = "";
|
|
for(var i = 0;i < this.length;i++){
|
|
btnsHtml += '<span></span>';
|
|
}
|
|
this.$tab.html(btnsHtml);
|
|
this.$$tabs = this.$tab.children("span");
|
|
|
|
//4：初始化样式、位置
|
|
this.$wrap.css("height",this.height);
|
|
|
|
if (this.length <= 1)
|
|
{/*一张图片时*/
|
|
return;
|
|
}
|
|
|
|
if (this.length == 2)
|
|
{/*两个滚动素材的情况*/
|
|
this.$touch.css("transition-timing-function",this.transFun).css("transition-duration",this.transDur+"ms")
|
|
.css("transform","translate3d(0,0,0)");
|
|
|
|
Z(this.$$items[0]).css("transform","translate3d(0,0,0)").addClass("z-active");
|
|
Z(this.$$items[1]).css("transform","translate3d("+this.width+"px,0,0)");
|
|
|
|
//要实现无缝滚动，需复制节点
|
|
this.$firstClone = Z(this.$$items[0].cloneNode(true)).appendTo(this.$touch);
|
|
this.$lastClone = Z(this.$$items[1].cloneNode(true)).appendTo(this.$touch);
|
|
this.$firstClone.css("transform","translate3d("+2*this.width+"px,0,0)");
|
|
this.$lastClone.css("transform","translate3d(-"+this.width+"px,0,0)");
|
|
|
|
//动画结束，位置调整
|
|
this.$touch.on(this.transitionFixed(), this.doubleSlideEnd, this);
|
|
}
|
|
else
|
|
{/*两张以上滚动素材的情况*/
|
|
this.$$items.css("transition-timing-function",this.transFun).css("transition-duration",this.transDur+"ms");
|
|
var that = this;
|
|
Z.each(this.$$items, function($item,index){
|
|
var translateX = index * that.width + "px";
|
|
if (index == 0) {
|
|
Z($item).addClass("z-active");
|
|
}
|
|
if (index == that.length - 1) {
|
|
translateX = -that.width + "px";
|
|
}
|
|
Z($item).css("transform","translate3d("+translateX+",0,0)");
|
|
});
|
|
}
|
|
Z(this.$$tabs[0]).addClass("z-active");
|
|
|
|
//5：滑动事件绑定
|
|
this.touchmoving = false;
|
|
this.$touch.on("touchstart",this.touchStart,this);
|
|
this.$touch.on("touchmove",this.touchMove,this);
|
|
this.$touch.on("touchend",this.touchEnd,this);
|
|
|
|
//6：开始执行动画
|
|
this.autoPlay();
|
|
},
|
|
autoPlay: function()
|
|
{
|
|
if(this.playAuto){
|
|
var that = this;
|
|
that.timer = setInterval(function(){
|
|
that.sliderNext(that);
|
|
},that.playSpeed);
|
|
}
|
|
},
|
|
touchStart:function(ev)
|
|
{//触摸事件开始
|
|
Z.E.forbidden(ev);
|
|
var touch = ev.touches[0];
|
|
this.touchStartX = touch.pageX;
|
|
|
|
//清除自动
|
|
clearInterval(this.timer);
|
|
|
|
//两个滚动素材的情况
|
|
if (this.length == 2){
|
|
var step = +step;
|
|
var $activeItem = this.$touch.find(".z-active");
|
|
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
|
this.touchBase = -activeIndex*this.width;
|
|
this.$touch.css("transition-property","none");
|
|
return;
|
|
}
|
|
|
|
//当前、前一个、后一个
|
|
this.$activeItem = this.$touch.find(".z-active");
|
|
var activeIndex = Z.AR.indexOf(this.$$items, this.$activeItem[0]);
|
|
this.$activeNext = Z(this.$$items[activeIndex + 1] || this.$$items[0]);
|
|
this.$activePrev = Z(this.$$items[activeIndex - 1] || this.$$items[this.length - 1]);
|
|
|
|
//清除transition
|
|
this.$activeItem.css("transition-duration","0ms");
|
|
this.$activeNext.css("transition-duration","0ms");
|
|
this.$activePrev.css("transition-duration","0ms");
|
|
},
|
|
touchMove: function(ev)
|
|
{//滑动中
|
|
if(this.touchmoving == false){
|
|
this.touchmoving = true;
|
|
}
|
|
Z.E.forbidden(ev);
|
|
var touch = ev.touches[0];
|
|
this.touchMoveX = touch.pageX;
|
|
|
|
//设置translate
|
|
var metabolicX = this.touchMoveX - this.touchStartX;
|
|
|
|
//两个滚动素材的情况
|
|
if (this.length == 2){
|
|
this.$touch.css("transform","translate3d("+(metabolicX+this.touchBase)+"px,0,0)");
|
|
return;
|
|
}
|
|
|
|
this.$activeItem.css("transform","translate3d("+metabolicX+"px,0,0)");
|
|
this.$activeNext.css("transform","translate3d("+(metabolicX + this.width)+"px,0,0)");
|
|
this.$activePrev.css("transform","translate3d("+(metabolicX - this.width)+"px,0,0)");
|
|
},
|
|
touchEnd: function(ev)
|
|
{//触摸事件结束
|
|
if (this.touchmoving == false){
|
|
return;
|
|
}
|
|
this.touchmoving = false;
|
|
Z.E.forbidden(ev);
|
|
|
|
//执行自动
|
|
this.autoPlay();
|
|
|
|
//判断滑动结果
|
|
var metabolicX = this.touchMoveX - this.touchStartX;
|
|
|
|
if (metabolicX == 0 || Math.abs(metabolicX) < this.width/2){
|
|
this.sliderStay();
|
|
return;
|
|
}
|
|
|
|
if (this.$activeItem) this.$activeItem.css("transition-duration",this.transDur+"ms");
|
|
if (metabolicX < 0){
|
|
if (this.$activeNext) this.$activeNext.css("transition-duration",this.transDur+"ms");
|
|
this.sliderNext();
|
|
} else {
|
|
if (this.$activePrev) this.$activePrev.css("transition-duration",this.transDur+"ms");
|
|
this.sliderPrev();
|
|
}
|
|
},
|
|
sliderNext: function()
|
|
{//后一个展示
|
|
if (this.length == 2){
|
|
this.doubleSlide(1);
|
|
return;
|
|
}
|
|
this.sliderPlay(1);
|
|
},
|
|
sliderStay: function ()
|
|
{//保持展示
|
|
if (this.length == 2){
|
|
this.doubleSlide(0);
|
|
return;
|
|
}
|
|
this.sliderPlay(0);
|
|
},
|
|
sliderPrev: function()
|
|
{//前一个展示
|
|
if (this.length == 2){
|
|
this.doubleSlide(-1);
|
|
return;
|
|
}
|
|
this.sliderPlay(-1);
|
|
},
|
|
sliderPlay: function(step)
|
|
{//滑动方法
|
|
var step = +step;
|
|
var $activeItem = this.$touch.find(".z-active");
|
|
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
|
$activeItem.removeClass("z-active");
|
|
|
|
//即将展示对象的索引值
|
|
var shouldIndex = activeIndex + step;
|
|
if (shouldIndex >= this.length) shouldIndex = 0;
|
|
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
|
|
|
//即将新定位的active，以及前后两个
|
|
var $shouldActive = Z(this.$$items[shouldIndex]);
|
|
var $shouldNext = Z(this.$$items[shouldIndex + 1] || this.$$items[0]);
|
|
var $shouldPrev = Z(this.$$items[shouldIndex - 1] || this.$$items[this.length - 1]);
|
|
|
|
//touch item新定位
|
|
$shouldActive.addClass("z-active").css("transform","translate3d(0,0,0)")
|
|
.css("transition-duration",this.transDur+"ms");
|
|
$shouldNext.css("transform","translate3d("+this.width+"px,0,0)");
|
|
$shouldPrev.css("transform","translate3d(-"+this.width+"px,0,0)");
|
|
|
|
//前后两个判断是否动画
|
|
var nextDur = prevDur = this.transDur+"ms";
|
|
if (step > 0){ nextDur = "0ms";}
|
|
else if(step < 0){ prevDur = "0ms";}
|
|
$shouldNext.css("transition-duration",nextDur);
|
|
$shouldPrev.css("transition-duration",prevDur);
|
|
|
|
//btn 展示
|
|
Z(this.$$tabs[shouldIndex]).addClass("z-active")
|
|
.siblings("span").removeClass("z-active");
|
|
},
|
|
doubleSlide: function(step)
|
|
{//两个滚动素材的动画
|
|
var step = +step;
|
|
var $activeItem = this.$touch.find(".z-active");
|
|
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
|
$activeItem.removeClass("z-active");
|
|
|
|
var num = shouldIndex = activeIndex + step;
|
|
if (shouldIndex >= this.length) shouldIndex = 0;
|
|
if (shouldIndex <= -1) shouldIndex = this.length - 1;
|
|
Z(this.$$items[shouldIndex]).addClass("z-active");
|
|
|
|
this.$touch.css("transform", "translate3d("+(-num*this.width)+"px,0,0)")
|
|
.css("transition-property","transform");
|
|
|
|
//btn 展示
|
|
Z(this.$$tabs[shouldIndex]).addClass("z-active")
|
|
.siblings("span").removeClass("z-active");
|
|
},
|
|
doubleSlideEnd: function()
|
|
{//两图片的滚动结束
|
|
var $activeItem = this.$touch.find(".z-active");
|
|
var activeIndex = Z.AR.indexOf(this.$$items, $activeItem[0]);
|
|
this.$touch.css("transition-property","none");
|
|
if(activeIndex == 0){
|
|
this.$touch.css("transform", "translate3d(0,0,0)");
|
|
}
|
|
if(activeIndex == 1){
|
|
this.$touch.css("transform", "translate3d("+(-this.width)+"px,0,0)");
|
|
}
|
|
},
|
|
transitionFixed: function()
|
|
{//兼容写法
|
|
var $div = document.createElement('div');
|
|
if ($div.style["transition"] !== undefined ){
|
|
$div = null;
|
|
return "transitionend";
|
|
}
|
|
if ($div.style["OTransition"] !== undefined ){
|
|
$div = null;
|
|
return "oTransitionEnd";
|
|
}
|
|
if ($div.style["WebkitTransition"] !== undefined ){
|
|
$div = null;
|
|
return "webkitTransitionEnd";
|
|
}
|
|
},
|
|
//end of Z.ZmSlider.prototype
|
|
}
|
|
|
|
|
|
|
|
|
|
//END
|
|
})(zhiqim);
|