Code666 (代码贴、代码片段)

[JavaScript] 手机网站幻灯图片效果 →→→→→进入此内容的聊天室

来自 , 2019-09-17, 写在 JavaScript, 查看 102 次.
URL http://www.code666.cn/view/38db3aed
  1. //滚动图片构造函数
  2. function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){
  3.  
  4.   this.scrollContId = scrollContId; //内容容器ID
  5.   this.arrLeftId = arrLeftId; //左箭头ID
  6.   this.arrRightId = arrRightId; //右箭头ID
  7.   this.dotListId = dotListId; //点列表ID
  8.   this.listType = listType; //列表类型
  9.  
  10.   this.dotClassName   = "dotItem";//点className
  11.   this.dotOnClassName   = "dotItemOn";//当前点className
  12.   this.dotObjArr = [];
  13.   this.listEvent = "onclick";
  14.   this.circularly = true; //循环滚动（无缝循环）
  15.  
  16.   this.pageWidth = 0; //翻页宽度
  17.   this.frameWidth = 0; //显示框宽度
  18.   this.speed = 10; //移动速度(单位毫秒，越小越快)
  19.   this.space = 10; //每次移动像素(单位px，越大越快)
  20.   this.scrollWidth = 5; //横向滚动宽度
  21.  
  22.   this.upright = false; //垂直的滚动
  23.  
  24.   this.pageIndex = 0;
  25.  
  26.   this.autoPlay = true;
  27.   this.autoPlayTime = 2; //秒
  28.  
  29.   this._autoTimeObj;
  30.   this._scrollTimeObj;
  31.   this._state = "ready"; // ready | floating | stoping
  32.  
  33.  
  34.   this.stripDiv = document.createElement("DIV");
  35.  
  36.  
  37.   this.lDiv01 = document.createElement("DIV");
  38.   this.lDiv02 = document.createElement("DIV");
  39. };
  40. ScrollPic.prototype = {
  41.   version : "1.41",
  42.   author : "mengjia",
  43.   pageLength : 0,
  44.   touch : true,
  45.   initialize : function(){ //初始化
  46.     var thisTemp = this;
  47.     if(!this.scrollContId){
  48.       throw new Error("必须指定scrollContId.");
  49.       return;
  50.     };
  51.     this.scDiv = this.$(this.scrollContId);
  52.     if(!this.scDiv){
  53.       throw new Error("scrollContId不是正确的对象.(scrollContId = \""+ this.scrollContId +"\")");
  54.       return;
  55.     };
  56.    
  57.     this.scDiv.style[this.upright?'height':'width'] = this.frameWidth + "px";
  58.     this.scDiv.style.overflow = "hidden";
  59.    
  60.     //HTML
  61.     this.lDiv01.innerHTML = this.scDiv.innerHTML;
  62.     this.scDiv.innerHTML = "";
  63.     this.scDiv.appendChild(this.stripDiv);
  64.     this.stripDiv.appendChild(this.lDiv01);
  65.     if(this.circularly){//无缝循环
  66.       this.stripDiv.appendChild(this.lDiv02);
  67.       this.lDiv02.innerHTML = this.lDiv01.innerHTML
  68.     };
  69.    
  70.    
  71.     this.stripDiv.style.overflow = "hidden";
  72.     this.stripDiv.style.zoom = "1";
  73.     this.stripDiv.style[this.upright?'height':'width'] = "32766px";
  74.    
  75.     if(!this.upright){  
  76.       this.lDiv01.style.cssFloat = "left";
  77.       this.lDiv01.style.styleFloat = "left";
  78.       this.lDiv01.style.overflow = "hidden";
  79.     };
  80.     this.lDiv01.style.zoom = "1";
  81.     if(this.circularly && !this.upright){ //无缝循环设置CSS
  82.       this.lDiv02.style.cssFloat = "left";
  83.       this.lDiv02.style.styleFloat = "left";
  84.       this.lDiv02.style.overflow = "hidden";
  85.     };
  86.     this.lDiv02.style.zoom = "1";
  87.    
  88.     this.addEvent(this.scDiv,"mouseover",function(){thisTemp.stop()});
  89.     this.addEvent(this.scDiv,"mouseout",function(){thisTemp.play()});
  90.    
  91.     //Arrowhead event
  92.     //left
  93.     if(this.arrLeftId){
  94.       this.alObj = this.$(this.arrLeftId);
  95.       if(this.alObj){
  96.         this.addEvent(this.alObj,"mousedown",function(){thisTemp.rightMouseDown()});
  97.         this.addEvent(this.alObj,"mouseup",function(){thisTemp.rightEnd()});
  98.         this.addEvent(this.alObj,"mouseout",function(){thisTemp.rightEnd()});
  99.       };
  100.     };
  101.     //right
  102.     if(this.arrRightId){
  103.       this.arObj = this.$(this.arrRightId);
  104.       if(this.arObj){
  105.         this.addEvent(this.arObj,"mousedown",function(){thisTemp.leftMouseDown()});
  106.         this.addEvent(this.arObj,"mouseup",function(){thisTemp.leftEnd()});
  107.         this.addEvent(this.arObj,"mouseout",function(){thisTemp.leftEnd()});
  108.       };
  109.     };
  110.    
  111.     var pages = Math.ceil(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth),i,tempObj;
  112.     this.pageLength = pages;
  113.     //dot
  114.     if(this.dotListId){
  115.       this.dotListObj = this.$(this.dotListId);
  116.       this.dotListObj.innerHTML = "";
  117.       if(this.dotListObj){
  118.        
  119.         for(i=0;i<pages;i++){
  120.           tempObj = document.createElement("span");
  121.           this.dotListObj.appendChild(tempObj);
  122.           this.dotObjArr.push(tempObj);
  123.          
  124.           if(i==this.pageIndex){
  125.             tempObj.className = this.dotOnClassName;
  126.           }else{
  127.             tempObj.className = this.dotClassName;
  128.           };
  129.           if(this.listType == 'number'){
  130.             tempObj.innerHTML = i+1;
  131.           }else if(typeof (this.listType) =='string' ){
  132.             tempObj.innerHTML = this.listType;
  133.           }else {
  134.             tempObj.innerHTML='';
  135.           };
  136.           tempObj.title = "第" + (i+1) + "页";
  137.           tempObj.num = i;
  138.           tempObj[this.listEvent] = function(){thisTemp.pageTo(this.num)};
  139.         };
  140.       };
  141.     };
  142.     this.scDiv[this.upright?'scrollTop':'scrollLeft'] = 0;
  143.     //autoPlay
  144.     if(this.autoPlay){this.play()};
  145.    
  146.     this._scroll = this.upright?'scrollTop':'scrollLeft';
  147.     this._sWidth = this.upright?'scrollHeight':'scrollWidth';
  148.    
  149.     if(typeof(this.onpagechange) === 'function'){
  150.       this.onpagechange();
  151.     };
  152.    
  153.     this.iPad();
  154.   },
  155.   leftMouseDown : function(){
  156.     if(this._state != "ready"){return};
  157.     var thisTemp = this;
  158.     this._state = "floating";
  159.     clearInterval(this._scrollTimeObj);
  160.     this.moveLeft();
  161.     this._scrollTimeObj = setInterval(function(){thisTemp.moveLeft()},this.speed);
  162.   },
  163.   rightMouseDown : function(){
  164.     if(this._state != "ready"){return};
  165.     var thisTemp = this;
  166.     this._state = "floating";
  167.     clearInterval(this._scrollTimeObj);
  168.     this.moveRight();
  169.     this._scrollTimeObj = setInterval(function(){thisTemp.moveRight()},this.speed);
  170.   },
  171.   moveLeft : function(){
  172.     if(this.circularly){ //无缝循环
  173.       if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth]){
  174.         this.scDiv[this._scroll] = this.scDiv[this._scroll] + this.space - this.lDiv01[this._sWidth];
  175.       }else{
  176.         this.scDiv[this._scroll] += this.space;
  177.       };
  178.     }else{
  179.       if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth] - this.frameWidth){
  180.         this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
  181.         //停
  182.         this.leftEnd();
  183.       }else{
  184.         this.scDiv[this._scroll] += this.space;
  185.       };
  186.     };
  187.     this.accountPageIndex();
  188.   },
  189.   moveRight : function(){
  190.     if(this.circularly){ //无缝循环
  191.       if(this.scDiv[this._scroll] - this.space <= 0){
  192.        
  193.         this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] - this.space;
  194.       }else{
  195.         this.scDiv[this._scroll] -= this.space;
  196.       };
  197.     }else{
  198.       if(this.scDiv[this._scroll] - this.space <= 0){
  199.         this.scDiv[this._scroll] = 0;
  200.         //停
  201.         this.rightEnd();
  202.       }else{
  203.         this.scDiv[this._scroll] -= this.space;
  204.       };
  205.     };
  206.     this.accountPageIndex();
  207.   },
  208.   leftEnd : function(){
  209.     if(this._state != "floating" && this._state != 'touch'){return};
  210.     this._state = "stoping";
  211.     clearInterval(this._scrollTimeObj);
  212.    
  213.     var fill = this.pageWidth - this.scDiv[this._scroll] % this.pageWidth;
  214.     this.move(fill);
  215.   },
  216.   rightEnd : function(){
  217.     if(this._state != "floating" && this._state != 'touch'){return};
  218.     this._state = "stoping";
  219.     clearInterval(this._scrollTimeObj);
  220.    
  221.     var fill = - this.scDiv[this._scroll] % this.pageWidth;
  222.    
  223.     this.move(fill);
  224.   },
  225.   move : function(num,quick){
  226.     var thisTemp = this;
  227.     var thisMove = num/5;
  228.     var theEnd = false;
  229.     if(!quick){
  230.       if(thisMove > this.space){thisMove = this.space};
  231.       if(thisMove < -this.space){thisMove = -this.space};
  232.     };
  233.    
  234.     if(Math.abs(thisMove)<1 && thisMove!=0){
  235.       thisMove = thisMove>=0?1:-1;
  236.     }else{
  237.       thisMove = Math.round(thisMove);
  238.     };
  239.    
  240.     var temp = this.scDiv[this._scroll] + thisMove;
  241.    
  242.     if(thisMove>0){
  243.       if(this.circularly){ //无缝循环
  244.         if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth]){
  245.           this.scDiv[this._scroll] = this.scDiv[this._scroll] + thisMove - this.lDiv01[this._sWidth];
  246.         }else{
  247.           this.scDiv[this._scroll] += thisMove;
  248.         };
  249.       }else{
  250.         if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth] - this.frameWidth){
  251.           this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
  252.           this._state = "ready";
  253.           theEnd = true;
  254.           //return;
  255.         }else{
  256.           this.scDiv[this._scroll] += thisMove;
  257.         };
  258.       };
  259.     }else{
  260.       if(this.circularly){ //无缝循环
  261.         if(this.scDiv[this._scroll] + thisMove < 0){
  262.           this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] + thisMove;
  263.         }else{
  264.           this.scDiv[this._scroll] += thisMove;
  265.         };
  266.       }else{
  267.         if(this.scDiv[this._scroll] - thisMove < 0){
  268.           this.scDiv[this._scroll] = 0;
  269.           this._state = "ready";
  270.           theEnd = true;
  271.           //return;
  272.         }else{
  273.           this.scDiv[this._scroll] += thisMove;
  274.         };
  275.       };
  276.     };
  277.    
  278.     if(typeof(this.onpagechange) === 'function'){
  279.       this.onpagechange();
  280.     };
  281.    
  282.     if(theEnd){
  283.       return;
  284.     };
  285.    
  286.     num -= thisMove;
  287.     if(Math.abs(num) == 0){
  288.       this._state = "ready";
  289.       if(this.autoPlay){this.play()};
  290.       this.accountPageIndex();
  291.       return;
  292.     }else{
  293.       this.accountPageIndex();
  294.       this._scrollTimeObj = setTimeout(function(){thisTemp.move(num,quick)},this.speed)
  295.     };
  296.    
  297.   },
  298.   pre : function(){
  299.     if(this._state != "ready"){return};
  300.     this._state = "stoping";
  301.     this.pageTo(this.pageIndex - 1);
  302.   },
  303.   next : function(reStar){
  304.     if(this._state != "ready"){return};
  305.     this._state = "stoping";
  306.     if(this.circularly){
  307.       this.pageTo(this.pageIndex + 1);
  308.     }else{
  309.       if(this.scDiv[this._scroll] >= this.lDiv01[this._sWidth] - this.frameWidth){
  310.         this._state = "ready";
  311.         if(reStar){this.pageTo(0)};
  312.       }else{
  313.         this.pageTo(this.pageIndex + 1);
  314.       };
  315.     };
  316.   },
  317.   play : function(){
  318.     var thisTemp = this;
  319.     if(!this.autoPlay){return};
  320.     clearInterval(this._autoTimeObj);
  321.     this._autoTimeObj = setInterval(function(){thisTemp.next(true)},this.autoPlayTime * 1000);
  322.   },
  323.   stop : function(){
  324.     clearInterval(this._autoTimeObj);
  325.   },
  326.   pageTo : function(num){
  327.     if(this.pageIndex == num){return};
  328.     if(num < 0){num = this.pageLength - 1};
  329.     clearTimeout(this._scrollTimeObj);
  330.     this._state = "stoping";
  331.     var fill = num * this.frameWidth - this.scDiv[this._scroll];
  332.     this.move(fill,true);
  333.   },
  334.   accountPageIndex : function(){
  335.     var pageIndex = Math.floor(this.scDiv[this._scroll] / this.frameWidth);
  336.     if(pageIndex == this.pageIndex){return};
  337.     this.pageIndex = pageIndex;
  338.    
  339.     if(this.pageIndex > Math.floor(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth )){this.pageIndex = 0};
  340.         if(typeof(this.onnowpage) === 'function'){
  341.                 this.onnowpage(this.pageIndex);
  342.         }
  343.     var i;
  344.         //alert(this.pageIndex);
  345.     for(i=0;i<this.dotObjArr.length;i++){
  346.       if(i==this.pageIndex){
  347.                  
  348.         this.dotObjArr[i].className = this.dotOnClassName;
  349.       }else{
  350.         this.dotObjArr[i].className = this.dotClassName;
  351.       };
  352.     };
  353.  
  354.     if(typeof(this.onpagechange) === 'function'){
  355.       this.onpagechange();
  356.     };
  357.   },
  358.  
  359.   iPadX : 0,
  360.   iPadLastX : 0,
  361.   iPadStatus : 'ok',
  362.   iPad : function(){
  363.     if(typeof(window.ontouchstart) === 'undefined'){ //不支持触屏
  364.       return;  
  365.     };
  366.     if(!this.touch){return};
  367.    
  368.     var tempThis = this;
  369.     this.addEvent(this.scDiv,'touchstart',function(e){tempThis._touchstart(e)});
  370.     this.addEvent(this.scDiv,'touchmove',function(e){tempThis._touchmove(e)});
  371.     this.addEvent(this.scDiv,'touchend',function(e){tempThis._touchend(e)});
  372.   },
  373.   _touchstart : function(e){
  374.     //if(this._state != "ready"){return};
  375.     //this._state = 'touch';
  376.     this.stop();
  377.     this.iPadX = e.touches[0].pageX;
  378.     this.iPadScrollX = window.pageXOffset;
  379.     this.iPadScrollY = window.pageYOffset; //用于判断页面是否滚动
  380.     this.scDivScrollLeft = this.scDiv[this._scroll];
  381.   },
  382.   _touchmove : function(e){
  383.     if(e.touches.length > 1){ //多点触摸
  384.       this.iPadStatus = 'ok';
  385.       return;
  386.     };
  387.     this.iPadLastX = e.touches[0].pageX;
  388.     var cX = this.iPadX - this.iPadLastX;
  389.     if(this.iPadStatus == 'ok'){
  390.       if(this.iPadScrollY == window.pageYOffset && this.iPadScrollX == window.pageXOffset && Math.abs(cX)>this.scrollWidth){ //横向触摸
  391.         this.iPadStatus = 'touch';
  392.       }else{
  393.         return;
  394.       };
  395.     };
  396.     this._state = 'touch';
  397.     var scrollNum = this.scDivScrollLeft + cX;
  398.    
  399.     if(scrollNum >= this.lDiv01[this._sWidth]){
  400.       scrollNum = scrollNum - this.lDiv01[this._sWidth];
  401.     };
  402.     if(scrollNum < 0){
  403.       scrollNum = scrollNum + this.lDiv01[this._sWidth];
  404.     };
  405.     this.scDiv[this._scroll] = scrollNum;
  406.     e.preventDefault();
  407.   },
  408.   _touchend : function(e){
  409.     if(this.iPadStatus != 'touch'){return};
  410.     this.iPadStatus = 'ok';
  411.     //this._state = 'ready';
  412.     var cX = this.iPadX - this.iPadLastX;
  413.     if(cX<0){
  414.       this.rightEnd();
  415.     }else{
  416.       this.leftEnd();
  417.     };
  418.     this.play();
  419.   },
  420.   $ : function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},
  421.   isIE : navigator.appVersion.indexOf("MSIE")!=-1?true:false,
  422.  
  423.   //Event
  424.   addEvent : function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}else{obj.addEventListener(eventType,func,false)}},
  425.   delEvent : function(obj,eventType,func){
  426.     if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}else{obj.removeEventListener(eventType,func,false)}
  427.   },
  428.   //Cookie
  429.   readCookie : function(l){var i="",I=l+"=";if(document.cookie.length>0){var offset=document.cookie.indexOf(I);if(offset!=-1){offset+=I.length;var end=document.cookie.indexOf(";",offset);if(end==-1)end=document.cookie.length;i=unescape(document.cookie.substring(offset,end))}};return i},
  430.  
  431.   writeCookie : function(O,o,l,I){var i="",c="";if(l!=null){i=new Date((new Date).getTime()+l*3600000);i="; expires="+i.toGMTString()};if(I!=null){c=";domain="+I};document.cookie=O+"="+escape(o)+i+c},
  432.   //Style
  433.   readStyle:function(i,I){if(i.style[I]){return i.style[I]}else if(i.currentStyle){return i.currentStyle[I]}else if(document.defaultView&&document.defaultView.getComputedStyle){var l=document.defaultView.getComputedStyle(i,null);return l.getPropertyValue(I)}else{return null}}
  434. };
  435.  

回复 "手机网站幻灯图片效果"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666