// 调用
var s41 = new slider({
target : '#slider411',
titleActiveClass : 'j-active',
itemActiveClass : 'j-active',
btn : '.sbtn',
}); // 声明方法
var slider = function(element){
if(!element.target)return false;
// 判断设备是否支持touch事件
var me = this;
this.touch = ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch;
this.target = element.target;
this.parent = element.parent||false;
this.slider = document.querySelector(this.target) || document.getElementById('slider');
this.count = $(element.target).children().size();
this.titleId = element.titleId || !1;
this.next = element.nextClass,
this.prev = element.prevClass,
this.animateClass = element.animateClass || 'f-anim';
this.scaleAnimateClass = element.scaleAnimateClass || 'f-slow',
this.control = element.control,
this.titleActiveClass = element.titleActiveClass||'j-active',
this.itemActiveClass = element.itemActiveClass||'j-active',
this.scale = element.scale-1;
this.btn = element.btn;
this.sImg = element.sImg;
this.page = element.page;
this.sImgActiveClass = element.sImgActiveClass||'on';
console.log(this.target+', '+this.titleId+', '+this.scrollWidth);
//console.log(this.target);
// 点击缩略图滚动对象
(function(){
var t = me.sImg;
var activeClass = 'on'; if(!($(t).size()>0))return false;
var c = $(t).children();
c.eq(0).addClass(activeClass);
c.on('click', function(){
var i = $(this).index();
me.scrollTo(i);
c.removeClass(activeClass).eq(i).addClass(activeClass);
});
})(); this.first=true;
this.last=false;
var item = $(element.target).children().eq(0);
this.itemWidth = item.width()+parseInt(item.css('marginLeft'))+parseInt(item.css('marginRight'))+parseInt(item.css('paddingLeft'))+parseInt(item.css('paddingRight'))+parseInt(item.css('border-left-width'))+parseInt(item.css('border-right-width')); item.addClass(this.itemActiveClass);
$(element.target).children().eq(1).addClass('j-next');
$(element.target).width(this.itemWidth*this.count);
var titlechildren = $('#'+this.titleId).children();
titlechildren.eq(0).addClass(me.titleActiveClass);
this.scrollWidth = this.itemWidth || element.scrollwidth || window.innerWidth;
this.scrollPage = function(p){ // 缩略图翻页
var l = p*me.page; // itemCount
var item = $(me.sImg).children().eq(0);
var w = item.width()+parseInt(item.css('marginLeft'))+parseInt(item.css('marginRight'))+parseInt(item.css('paddingLeft'))+parseInt(item.css('paddingRight'))+parseInt(item.css('border-left-width'))+parseInt(item.css('border-right-width'))
$(me.sImg).parent().animate({scrollLeft: l*w},500);
console.log(w+', '+l+', ');
}; this.scrollTo = function(page,sliderTips){
titlechildren.removeClass(me.titleActiveClass);
var i = page;
this.events.index = i;
titlechildren.eq(i).addClass(me.titleActiveClass);
$(element.target).addClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-i * this.scrollWidth ) + "px,0 ,0)";
me.class();
// window.lacation.href参数导致滑动时执行
me.first=false;
me.last=false; if(sliderTips){
if(page==0){
me.first=true;
me.last=false;
}else if(page==me.count-1){
me.first=false;
me.last=true;
};
};
if($(me.sImg).size()>0){ // 判断缩略图翻页[0]
var i = me.events.index*1+1;
var p = Math.ceil(i/me.page)-1;
me.scrollPage(p);
$(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
}; // 缩放结束
if(me.scale>0){
var active = '.'+me.itemActiveClass;
$(active, me.target).css({'webkitTransform':'scale('+(me.scale+1)+')'});
$('.j-prev', me.target).add('.j-next', me.target).css('webkitTransform', 'scale(1)');
$(me.target).children().addClass('f-slow');
};
}; // 标题跳转事件
if(this.titleId){
var d = document.querySelector("#"+this.titleId);
d.onclick = function(event){
me.scrollTo($(event.target).index());
};
}; var first, last, started=false; // 事件
this.events = {
index: 0, // 显示元素的索引
slider: me.slider, // this为slider对象
icons: document.getElementById(me.titleId),
icon: document.querySelectorAll('#'+me.titleId+' *'),
handleEvent: function(event) {
// this指events对象
var self = this;
if (event.type == 'touchstart') {
self.start(event);
} else if(event.type == 'touchmove') {
self.move(event);
} else if(event.type == 'touchend') {
self.end(event);
}
}, // 滑动开始
start: function(event) {
started = true;
//console.log('start '+me.first+', '+me.last);
//event.preventDefault();
if (event.touches.length > 1 || event.scale && event.scale !== 1) return; var touch = event.touches[0]; // touches数组对象获得屏幕上所有的touch,取第一个touch
startPos = { // 取第一个touch的坐标值
x: touch.pageX,
y: touch.pageY,
time: +new Date
};
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
}; // 缩放开始
if(me.scale) $(me.target).children().removeClass(me.scaleAnimateClass); this.slider.addEventListener('touchmove', this, false);
this.slider.addEventListener('touchend', this, false); //自定义touchstart事件
if(element.start){
element.start.call(me, event);
};
}, // 移动
move: function(event) {
// 当屏幕有多个touch或者页面被缩放过,就不执行move操作
if (event.touches.length > 1 || event.scale && event.scale !== 1) return;
var touch = event.touches[0];
endPos = {
x: touch.pageX - startPos.x,
y: touch.pageY - startPos.y
}; var o = $(event.target).closest('._target'); // czy
if(o.length){
if(o.hasClass('_left')){ // 锁定左
if(endPos.x>0){ // 往右
event.preventDefault(); // 执行动画
}else if(endPos.x<0){ // 往左
event.stopPropagation(); // 执行原生滚动
return ;
}
}else if(o.hasClass('_right')){ // 锁定右
if(endPos.x>0){ // 往右
event.stopPropagation(); // 执行原生滚动
return ;
}else if(endPos.x<0){ // 往左
event.preventDefault(); // 执行动画
}
}else{
// 中间
event.stopPropagation(); // 执行原生滚动
return ;
}
} // 系统滚动条事件
/*
var sx = $(event.target).closest('.scrollx');
var sy = $(event.target).closest('.scrolly');
if((sx.size()>0)||(sy.size()>0)){
me.parent = true;
if(sx.size()>0){
me.first = false;
me.last = false;
// 判断水平滚动条是否first或next
var x={
pl : parseInt(sx.css('paddingLeft')),
pr : parseInt(sx.css('paddingRight')),
pw : sx.width()*1,
l : Math.abs(sx.children().position().left),
w : sx.children().width()*1,
r : parseInt(sx.children().css('paddingLeft')),
};
if(x.pl==x.l&&endPos.x>0){
me.first = true;
me.last = false;
}else if(((x.l+x.pr+x.pl+x.pw)-(x.w+x.r)==0)&&endPos.x<0){
me.first = false;
me.last = true;
}else{
me.first = false;
me.last = false;
return false;
};
if(me.first||me.last){
event.preventDefault();
}else{
event.stopPropagation();
return false;
}; }else if(sy.size()>0){
// 垂直滚动事件
if(scrollY || (!scrollX && Math.abs(endPos.y)>=Math.abs(endPos.x))){
// 阻止冒泡
event.stopPropagation();
scrollY = true;
scrollX = false;
return false;
}else if(scrollX || Math.abs(endPos.y)<Math.abs(endPos.x)){
scrollY = false;
scrollX = true;
};
};
}else{ console.log('阻止默认');
event.preventDefault();
}; */ if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
event.preventDefault();
}else{
event.stopPropagation()
}; // 跟随变形
if(me.scale>0){
var active = '.'+me.itemActiveClass;
var t = $(active, me.target).css('webkitTransform') || $(active, me.target).css('transform');
var scale = t.substring(t.indexOf('(')+1,t.indexOf(','))-1;
var n = me.scale/(1024/Math.abs(endPos.x))+1;
var a = me.scale-(me.scale/(1024/Math.abs(endPos.x)))+1;
//console.log('a '+a);
if(endPos.x<0){
$('.j-next', me.target).css('webkitTransform','scale('+n+')');
$(active, me.target).css('webkitTransform','scale('+a+')');
}else if(endPos.x>0){
$('.j-prev', me.target).css('webkitTransform','scale('+n+')');
$(active, me.target).css('webkitTransform','scale('+a+')');
};
}; // 执行操作,使元素移动
$(this.slider).removeClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-this.index * me.scrollWidth + endPos.x/($(window).width()/me.scrollWidth)) + "px,0 ,0)"; // 自定义touchmove事件
if(element.move){
element.move.call(me, event);
};
}, // 滑动释放
end: function(event) {
started = false;
var o = $(event.target).closest('._target'); // czy
if(o.length){
if(o.hasClass('_left')){ // 锁定左
if(endPos.x>0){ // 往右
event.preventDefault(); // 执行动画
}else if(endPos.x<0){ // 往左
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}
}else if(o.hasClass('_right')){ // 锁定右
if(endPos.x>0){ // 往右
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}else if(endPos.x<0){ // 往左
event.preventDefault(); // 执行动画
}
}else{
// 中间
event.stopPropagation(); // 执行原生滚动
checkScroll();
return ;
}
}
function checkScroll(){
var pwidth = o.width();
var width = o.children().width();
var left = o.scrollLeft();
first = left==0;
last = pwidth+left>=width;
if(first && last){
o.addClass('_left');
o.addClass('_right');
}else if(first){
o.addClass('_left');
o.removeClass('_right');
}else if(last){
o.addClass('_right');
o.removeClass('_left');
}else{
o.removeClass('_left');
o.removeClass('_right');
}
} if(me.parent && ((me.first && endPos.x>0) || (me.last && endPos.x<0))){
}else{
event.stopPropagation();
}; var duration = +new Date - startPos.time; // 滑动的持续时间
if(me.titleId)this.icon[this.index].className = '';
if (Number(duration) > 100) {
// 判断是左移还是右移,当偏移量大于50时执行
if (endPos.x > 50) {
this.index == 0 ? i=0:i=1;
this.index = parseInt(this.index) - i;
this.index == 0 ? me.first = true : me.first = false;
me.last = false;
} else if(endPos.x < -50) {
this.index == me.count-1 ? i=0:i=1;
this.index = parseInt(this.index) + i;
this.index == me.count-1 ? me.last = true : me.last = false;
me.first = false;
};
};
//console.log('end '+me.first+', '+me.last); $(this.slider).addClass(me.animateClass);
this.slider.style.webkitTransform = "translate3d(" + (-this.index*me.scrollWidth) + "px,0 ,0)"; if($(me.sImg).size()>0){ // 判断缩略图翻页[1]
var i = me.events.index+1;
var p = Math.ceil(i/me.page)-1;
me.scrollPage(p);
$(me.sImg).children().removeClass(me.sImgActiveClass).eq(me.events.index).addClass(me.sImgActiveClass);
}; // 解绑事件
this.slider.removeEventListener('touchmove', this, false);
this.slider.removeEventListener('touchend', this, false);
me.class(); // 缩放结束
if(me.scale>0){
var active = '.'+me.itemActiveClass;
$(active, me.target).css({'webkitTransform':'scale('+(me.scale+1)+')'});
$('.j-prev', me.target).add('.j-next', me.target).css('webkitTransform', 'scale(1)');
$(me.target).children().addClass('f-slow');
}; //btn
if($(me.btn).size()>0){
var onlyone = me.count==1?true:false;
if(me.events.index==0){
$('.prev', me.btn).hide();
if(!(me.count==1))$('.next', me.btn).show();
//me.first=true;
//me.last=false;
}else if(me.events.index==me.count-1){
$('.prev', me.btn).show();
$('.next', me.btn).hide();
//me.first=false;
//me.last=true;
}else{
$('.prev', me.btn).show();
$('.next', me.btn).show();
//me.first=false;
//me.last=false;
};
}; //自定义touchend事件
if(element.end){
element.end.call(me, event);
}; //console.log(me.target+', '+me.first+', '+me.last) ;
}
}, this.class = function(){ // 当前,上一个,下一个加类名
var children = $(element.target).children(),
i = this.events.index;
children.removeClass(me.itemActiveClass);
children.removeClass('j-active').eq(i).addClass(me.itemActiveClass);
if(me.count>1){
children.removeClass('j-next').eq(i+1).addClass('j-next');
children.removeClass('j-prev').eq(i-1).addClass('j-prev');
}; if(me.titleId){
$('#'+me.titleId).children().eq(i).addClass(me.titleActiveClass);
};
}, // 初始化
this.init = function() {
// this指slider对象
var self = this; $(this.target).find('._target').each(function(){
var o = $(this);
o.scroll(function(){
if(!started){ // 滚动结束后继续监控原生滚动条,以解决弹性滚动问题
var pwidth = o.width();
var width = o.children().width();
var left = o.scrollLeft();
first = left==0;
last = pwidth+left>=width;
console.log(first);
console.log(last);
if(first && last){
o.addClass('_left');
o.addClass('_right');
}else if(first){
o.addClass('_left');
o.removeClass('_right');
}else if(last){
o.addClass('_right');
o.removeClass('_left');
}else{
o.removeClass('_left');
o.removeClass('_right');
}
}
});
}); // addEventListener第二个参数可以传一个对象,会调用该对象的handleEvent属性
if(!!self.touch) this.slider.addEventListener('touchstart', self.events, false);
}; if($(me.btn).size()>0){ //初始化
$('.prev',me.btn).hide();
if(me.count==1)$('.next',me.btn).hide(); $(me.btn).click(function(event){
var t = {
p : $(event.target).hasClass('prev'),
n : $(event.target).hasClass('next'),
};
if(!t.p&&!t.n)return false; if(t.p){
if(me.events.index==0){
return false;
}else if(me.events.index==1){
me.first = true;
me.last = false;
};
me.events.index -= 1;
if(me.events.index==0){
$('.prev',me.btn).hide();
$('.next',me.btn).show();
}else{
$('.prev',me.btn).show();
$('.next',me.btn).show();
};
}else if(t.n){
if(me.events.index==me.count-1){
return false;
}else if(me.events.index==me.count-2){
me.first = false;
me.last = true;
};
me.events.index += 1;
if(me.events.index==me.count-1){
$('.prev',me.btn).show();
$('.next',me.btn).hide();
}else{
$('.prev',me.btn).show();
$('.next',me.btn).show();
};
}; me.scrollTo(me.events.index); });
}; this.init();
};

yali项目的slider的更多相关文章

  1. 团队项目——编写项目的Spec

    团队项目--编写项目的Spec 一.Spec的目标        spec主要用来说明软件的外部功能,和用户的交互情况,主要用来说明软件内部的设计.图片编辑器是与生活息息相关的一个必备软件,随的流行, ...

  2. 如何修改MyEclipse项目的web context-root

    修改一个MyEclipse项目的名称很容易,右键点项目->rename就行了. 但此时项目的web context-root 还没有改变,需要右键点项目->properties->M ...

  3. 为什么项目的jar包会和tomcat的jar包冲突?

    为什么项目的jar包会和tomcat的jar包冲突? 碰到这个问题,猜测tomcat启动时会将自己的lib和项目的lib在逻辑上归并为一个大的lib,但是并没有做版本区分以及去重,这样相同的包可能就有 ...

  4. spring项目的 context root 修改之后,导致 WebApplicationContext 初始化两次的解决方法

    修改了 spring web 项目的 context root 为 / 之后,在启动项目时,会导致 WebApplicationContext  初始化两次,下面是其初始化日志: 第一次初始化: 四月 ...

  5. 谈谈软件项目的dependency

    说到软件项目的依赖管理,可以从三个方面来考虑: 一.由build system控制的dependency 现在的build system,都支持一定程度上的dependency management, ...

  6. Eclipse中修改Web项目的URL访问路径

    背景 访问路径,也就是指在浏览器中访问该web系统时的根路径,比如http://localhost:8080/xxxx/index.jsp  这里的xxxx,也就是request.getContext ...

  7. 系列文章:老项目的#iPhone6与iPhone6Plus适配#(持续更新中,更新日期2014年10月12日 星期日 )

    本文永久地址为http://www.cnblogs.com/ChenYilong/p/4020399.html ,转载请注明出处. ********************************** ...

  8. 老项目的#iPhone6与iPhone6Plus适配#LaunchImage适配

    本文永久地址为 http://www.cnblogs.com/ChenYilong/p/4020384.html,转载请注明出处.  Evernote印象笔记链接:https://www.everno ...

  9. 学习笔记——Maven实战(三)多模块项目的POM重构

    重复,还是重复 程序员应该有狗一般的嗅觉,要能嗅到重复这一最常见的坏味道,不管重复披着怎样的外衣,一旦发现,都应该毫不留情地彻底地将其干掉.不要因为POM不是产品代码而纵容重复在这里发酵,例如这样一段 ...

随机推荐

  1. kali客户端攻击

    浏览器攻击 browser_autpwn2 (BAP2) mkdir /test 为接受响应的服务器创建目录   use auxiliary/server/browser_autopwn2  set ...

  2. maven中在本地maven仓库添加jar包

    Maven 手动添加 JAR 包到本地仓库 Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个人共用,有时候用  ...

  3. Linux下服务器环境的搭建和配置之一——Apache篇

    最近一个多月(2016-06-20开始至今),一直在忙海外广告平台FAQ系统的开发,既要负责服务器环境的搭建,又要写前端,还要写后台和数据库,甚至还要考虑产品需求和设计.所以是一个很大的挑战,对自身也 ...

  4. F9 开发之左树右表中的左树

    1 首先在前端应用树树控件 <div class="fui-left"> <div role="head" title="地区选择& ...

  5. spring的校验框架 @Validated & BindingResult

    controller上写法类似这样: @RequestMapping(value = "saleInfoList.json", method = RequestMethod.GET ...

  6. 分布式缓存HttpRuntime.cache应用到单点登陆中_优化登陆

    以前的设计方案,是我们在数据库中放一个表,用作存储验证登陆成功的用户,并且生成用户TOKEN(令牌) 分布式缓存+集群的解决方案图: 相应的代码: DE层中配置文件: receiveTimeout=& ...

  7. python 在mongo 中建立索引

    import pymongo mongo = pymongo.Connection('localhost') collection = mongo['database']['user'] collec ...

  8. 二十八、oracle 视图

    一.介绍视图是一张虚拟表,其内容由查询定义,同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用视 ...

  9. 解决 GoogleApi 无法访问的问题

    因为 google 被天朝屏蔽,所以很多运用了 fonts.googleapis 的网站都打开很慢,会直到加载 fonts.googleapis 超时才能打开网页. 在本地开发时,可以引用国内的CDN ...

  10. window.open打开新页面居中

    var iHeight = 500;//新打开页面的高 var iWidth = 800;//新打开页面的宽 var iTop = (window.screen.height-30-iHeight)/ ...