AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

移动开发html5最快banner制作(快速生成)有2种方法

2016-07-20 1084
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
对象存储 OSS，20GB 3个月
推荐场景：
基于PAI-EAS挂载OSS部署AIGC服务 ossutil工具管理OSS
对象存储 OSS，恶意文件检测 1000次 1年
对象存储 OSS，内容安全 1000次 1年
简介： 爱零工home $(document). 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>爱零工home</title>

    <link rel="stylesheet" type="text/css" href="styles/index.css">


    <script type="text/javascript" src="scripts/min.js"></script>

    <script type="text/javascript" src="scripts/scroll.js"></script>

    <script type="text/javascript">


        $(document).ready(function(){
            //wap首页焦点图片滚动
            if(document.getElementById("slide_01")){
                var slide_01 = new ScrollPic();
                slide_01.scrollContId   = "slide_01"; //内容容器ID
                slide_01.dotListId      = "slide_01_dot";//点列表ID
                slide_01.dotOnClassName = "f_ifocus_cur";
                slide_01.arrLeftId      = "sl_left"; //左箭头ID
                slide_01.arrRightId     = "sl_right";//右箭头ID
                slide_01.frameWidth     = 360;
                slide_01.pageWidth      = 360;
                slide_01.upright        = false;
                slide_01.speed          = 10;
                slide_01.space          = 30;
                slide_01.initialize(); //初始化
            }
        });
    </script>




</head>
<body>
    <div id="page">

        <header class="header">首页</header>

        <!--banner-->
        <div class="m360 f_ifocus">

            <div id="slide_01" class="f_ifocus_lis">
                <div class="f_ifocus_con">
                    <a href="news/show_112688.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a>
                    <!--<p><a href="news/show_112688.html">带屁股的小钢炮 试驾进口奥迪A3 40TFSI</a></p>-->
                </div>
                <div class="f_ifocus_con">
                    <a href="../www.fb.cn/daloorv"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a>
                    <!--<p><a href="../www.fb.cn/daloorv">大陆房车</a></p>-->
                </div>
                <div class="f_ifocus_con">
                    <a href="news/show_90393.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a>
                    <!--<p><a href="news/show_90393.html">合纵连横 话说发动机纵横时代（历史篇）</a></p>-->
                </div>
                <div class="f_ifocus_con">
                    <a href="news/show_113021.html"><img src="http://oss-cn-shanghai.aliyuncs.com/taskdesc/211/1458696211.png"/></a>
                    <!--<p><a href="news/show_113021.html">对比试驾：路虎极光vs奔驰GLA</a></p>-->
                </div>
            </div>
            <div id="slide_01_dot" class="f_ifocus_btn">
            </div>



            
    </div>

</body>
</html>
/*主页样式*/
/*通用样式*/
html {font-size:100%; -webkit-text-size-adjust:none;}
body,textarea,input,select,option {font-size:12px;color:#000;font-family:'Microsoft Yahei','Lucida Grande','Helvetica','Arail','Verdana','sans-serif';}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
body,h1,h2,h3,h4,h5,h6,blockquote,ol,ul,dl,dd,p,textarea,input,select,option,form {margin:0;}
ol,ul,textarea,input,option,th,td {padding:0;}
.clears:before,.clears:after {content:'';display:table;}.clears:after {clear:both;}.clears {*zoom:1;}
.clear {clear:both;height:0;overflow:hidden;}
a {text-decoration:none;color:#434343;}
a:hover {text-decoration:none;}
a,textarea,input {outline:none;}
textarea {overflow:auto;resize:none;}
a img {border:none;}

.m360 {width:360px; margin:0 auto;}



/*header*/
.header {width:100%;min-width:100%;height:40px; border-bottom:1px solid #A3A6AA;
    background-color:#ff9900; -webkit-background-size:360px 42px; text-align: center; align-content: center}

/* f_ifocus **/
.f_ifocus {position:relative; height:163px; overflow:hidden; background-color: greenyellow}
.f_ifocus_lis .f_ifocus_con {float:left; width:360px; height:163px; position:relative;}
.f_ifocus_lis .f_ifocus_con img {display:block; width:360px; height:163px;}
.f_ifocus_lis .f_ifocus_con p {position:absolute; left:0; bottom:0; width:100%; height:26px; line-height:26px; text-align:center; font-size:14px;}
.f_ifocus_lis .f_ifocus_con p a {color:#fff;}
.f_ifocus_btn {position:absolute; left:0; bottom:32px; width:100%; text-align:center; z-index:3;}
.f_ifocus_btn span {display:inline-block; width:6px; height:6px; overflow:hidden; cursor:pointer; margin:0 6px; background-color:#cbcbc7; border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;}
.f_ifocus_btn span.f_ifocus_cur {background-color:#fff;}

切记引入jquery  跟 scroll.js以下是scroll.js代码
//滚动图片构造函数
function ScrollPic(scrollContId,arrLeftId,arrRightId,dotListId,listType){
  
  this.scrollContId = scrollContId; //内容容器ID
  this.arrLeftId = arrLeftId; //左箭头ID
  this.arrRightId = arrRightId; //右箭头ID
  this.dotListId = dotListId; //点列表ID
  this.listType = listType; //列表类型

  this.dotClassName   = "dotItem";//点className
  this.dotOnClassName   = "dotItemOn";//当前点className
  this.dotObjArr = [];
  this.listEvent = "onclick";
  this.circularly = true; //循环滚动（无缝循环）
  
  this.pageWidth = 0; //翻页宽度
  this.frameWidth = 0; //显示框宽度
  this.speed = 10; //移动速度(单位毫秒，越小越快)
  this.space = 10; //每次移动像素(单位px，越大越快)
  this.scrollWidth = 5; //横向滚动宽度
  
  this.upright = false; //垂直的滚动
  
  this.pageIndex = 0;
  
  this.autoPlay = true;
  this.autoPlayTime = 2; //秒
  
  this._autoTimeObj;
  this._scrollTimeObj;
  this._state = "ready"; // ready | floating | stoping
  
  
  this.stripDiv = document.createElement("DIV");
  
  
  this.lDiv01 = document.createElement("DIV");
  this.lDiv02 = document.createElement("DIV");
};
ScrollPic.prototype = {
  version : "1.41",
  author : "mengjia",
  pageLength : 0,
  touch : true,
  initialize : function(){ //初始化
    var thisTemp = this;
    if(!this.scrollContId){
      throw new Error("必须指定scrollContId.");
      return;
    };
    this.scDiv = this.$(this.scrollContId);
    if(!this.scDiv){
      throw new Error("scrollContId不是正确的对象.(scrollContId = \""+ this.scrollContId +"\")");
      return;
    };
    
    this.scDiv.style[this.upright?'height':'width'] = this.frameWidth + "px";
    this.scDiv.style.overflow = "hidden";
    
    //HTML
    this.lDiv01.innerHTML = this.scDiv.innerHTML;
    this.scDiv.innerHTML = "";
    this.scDiv.appendChild(this.stripDiv);
    this.stripDiv.appendChild(this.lDiv01);
    if(this.circularly){//无缝循环
      this.stripDiv.appendChild(this.lDiv02);
      this.lDiv02.innerHTML = this.lDiv01.innerHTML
    };
    
    
    this.stripDiv.style.overflow = "hidden";
    this.stripDiv.style.zoom = "1";
    this.stripDiv.style[this.upright?'height':'width'] = "32766px";
    
    if(!this.upright){  
      this.lDiv01.style.cssFloat = "left";
      this.lDiv01.style.styleFloat = "left";
      this.lDiv01.style.overflow = "hidden";
    };
    this.lDiv01.style.zoom = "1";
    if(this.circularly && !this.upright){ //无缝循环设置CSS
      this.lDiv02.style.cssFloat = "left";
      this.lDiv02.style.styleFloat = "left";
      this.lDiv02.style.overflow = "hidden";
    };
    this.lDiv02.style.zoom = "1";
    
    this.addEvent(this.scDiv,"mouseover",function(){thisTemp.stop()});
    this.addEvent(this.scDiv,"mouseout",function(){thisTemp.play()});
    
    //Arrowhead event
    //left
    if(this.arrLeftId){
      this.alObj = this.$(this.arrLeftId);
      if(this.alObj){
        this.addEvent(this.alObj,"mousedown",function(){thisTemp.rightMouseDown()});
        this.addEvent(this.alObj,"mouseup",function(){thisTemp.rightEnd()});
        this.addEvent(this.alObj,"mouseout",function(){thisTemp.rightEnd()});
      };
    };
    //right
    if(this.arrRightId){
      this.arObj = this.$(this.arrRightId);
      if(this.arObj){
        this.addEvent(this.arObj,"mousedown",function(){thisTemp.leftMouseDown()});
        this.addEvent(this.arObj,"mouseup",function(){thisTemp.leftEnd()});
        this.addEvent(this.arObj,"mouseout",function(){thisTemp.leftEnd()});
      };
    };
    
    var pages = Math.ceil(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth),i,tempObj;
    this.pageLength = pages;
    //dot
    if(this.dotListId){
      this.dotListObj = this.$(this.dotListId);
      this.dotListObj.innerHTML = "";
      if(this.dotListObj){
        
        for(i=0;i<pages;i++){
          tempObj = document.createElement("span");
          this.dotListObj.appendChild(tempObj);
          this.dotObjArr.push(tempObj);
          
          if(i==this.pageIndex){
            tempObj.className = this.dotOnClassName;
          }else{
            tempObj.className = this.dotClassName;
          };
          if(this.listType == 'number'){
            tempObj.innerHTML = i+1;
          }else if(typeof (this.listType) =='string' ){
            tempObj.innerHTML = this.listType;
          }else {
            tempObj.innerHTML='';
          };
          tempObj.title = "第" + (i+1) + "页";
          tempObj.num = i;
          tempObj[this.listEvent] = function(){thisTemp.pageTo(this.num)};
        };
      };
    };
    this.scDiv[this.upright?'scrollTop':'scrollLeft'] = 0;
    //autoPlay
    if(this.autoPlay){this.play()};
    
    this._scroll = this.upright?'scrollTop':'scrollLeft';
    this._sWidth = this.upright?'scrollHeight':'scrollWidth';
    
    if(typeof(this.onpagechange) === 'function'){
      this.onpagechange();
    };
    
    this.iPad();
  },
  leftMouseDown : function(){
    if(this._state != "ready"){return};
    var thisTemp = this;
    this._state = "floating";
    clearInterval(this._scrollTimeObj);
    this.moveLeft();
    this._scrollTimeObj = setInterval(function(){thisTemp.moveLeft()},this.speed);
  },
  rightMouseDown : function(){
    if(this._state != "ready"){return};
    var thisTemp = this;
    this._state = "floating";
    clearInterval(this._scrollTimeObj);
    this.moveRight();
    this._scrollTimeObj = setInterval(function(){thisTemp.moveRight()},this.speed);
  },
  moveLeft : function(){
    if(this.circularly){ //无缝循环
      if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth]){
        this.scDiv[this._scroll] = this.scDiv[this._scroll] + this.space - this.lDiv01[this._sWidth];
      }else{
        this.scDiv[this._scroll] += this.space;
      };
    }else{
      if(this.scDiv[this._scroll] + this.space >= this.lDiv01[this._sWidth] - this.frameWidth){
        this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
        //停
        this.leftEnd();
      }else{
        this.scDiv[this._scroll] += this.space;
      };
    };
    this.accountPageIndex();
  },
  moveRight : function(){
    if(this.circularly){ //无缝循环
      if(this.scDiv[this._scroll] - this.space <= 0){
        
        this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] - this.space;
      }else{
        this.scDiv[this._scroll] -= this.space;
      };
    }else{
      if(this.scDiv[this._scroll] - this.space <= 0){
        this.scDiv[this._scroll] = 0;
        //停
        this.rightEnd();
      }else{
        this.scDiv[this._scroll] -= this.space;
      };
    };
    this.accountPageIndex();
  },
  leftEnd : function(){
    if(this._state != "floating" && this._state != 'touch'){return};
    this._state = "stoping";
    clearInterval(this._scrollTimeObj);
    
    var fill = this.pageWidth - this.scDiv[this._scroll] % this.pageWidth;
    this.move(fill);
  },
  rightEnd : function(){
    if(this._state != "floating" && this._state != 'touch'){return};
    this._state = "stoping";
    clearInterval(this._scrollTimeObj);
    
    var fill = - this.scDiv[this._scroll] % this.pageWidth;
    
    this.move(fill);
  },
  move : function(num,quick){
    var thisTemp = this;
    var thisMove = num/5;
    var theEnd = false;
    if(!quick){
      if(thisMove > this.space){thisMove = this.space};
      if(thisMove < -this.space){thisMove = -this.space};
    };
    
    if(Math.abs(thisMove)<1 && thisMove!=0){
      thisMove = thisMove>=0?1:-1;
    }else{
      thisMove = Math.round(thisMove);
    };
    
    var temp = this.scDiv[this._scroll] + thisMove;
    
    if(thisMove>0){
      if(this.circularly){ //无缝循环
        if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth]){
          this.scDiv[this._scroll] = this.scDiv[this._scroll] + thisMove - this.lDiv01[this._sWidth];
        }else{
          this.scDiv[this._scroll] += thisMove;
        };
      }else{
        if(this.scDiv[this._scroll] + thisMove >= this.lDiv01[this._sWidth] - this.frameWidth){
          this.scDiv[this._scroll] = this.lDiv01[this._sWidth] - this.frameWidth;
          this._state = "ready";
          theEnd = true;
          //return;
        }else{
          this.scDiv[this._scroll] += thisMove;
        };
      };
    }else{
      if(this.circularly){ //无缝循环
        if(this.scDiv[this._scroll] + thisMove < 0){
          this.scDiv[this._scroll] = this.lDiv01[this._sWidth] + this.scDiv[this._scroll] + thisMove;
        }else{
          this.scDiv[this._scroll] += thisMove;
        };
      }else{
        if(this.scDiv[this._scroll] - thisMove < 0){
          this.scDiv[this._scroll] = 0;
          this._state = "ready";
          theEnd = true;
          //return;
        }else{
          this.scDiv[this._scroll] += thisMove;
        };
      };
    };
    
    if(typeof(this.onpagechange) === 'function'){
      this.onpagechange();
    };
    
    if(theEnd){
      return;
    };
    
    num -= thisMove;
    if(Math.abs(num) == 0){
      this._state = "ready";
      if(this.autoPlay){this.play()};
      this.accountPageIndex();
      return;
    }else{
      this.accountPageIndex();
      this._scrollTimeObj = setTimeout(function(){thisTemp.move(num,quick)},this.speed)
    };
    
  },
  pre : function(){
    if(this._state != "ready"){return};
    this._state = "stoping";
    this.pageTo(this.pageIndex - 1);
  },
  next : function(reStar){
    if(this._state != "ready"){return};
    this._state = "stoping";
    if(this.circularly){
      this.pageTo(this.pageIndex + 1);
    }else{
      if(this.scDiv[this._scroll] >= this.lDiv01[this._sWidth] - this.frameWidth){
        this._state = "ready";
        if(reStar){this.pageTo(0)};
      }else{
        this.pageTo(this.pageIndex + 1);
      };
    };
  },
  play : function(){
    var thisTemp = this;
    if(!this.autoPlay){return};
    clearInterval(this._autoTimeObj);
    this._autoTimeObj = setInterval(function(){thisTemp.next(true)},this.autoPlayTime * 1000);
  },
  stop : function(){
    clearInterval(this._autoTimeObj);
  },
  pageTo : function(num){
    if(this.pageIndex == num){return};
    if(num < 0){num = this.pageLength - 1};
    clearTimeout(this._scrollTimeObj);
    this._state = "stoping";
    var fill = num * this.frameWidth - this.scDiv[this._scroll];
    this.move(fill,true);
  },
  accountPageIndex : function(){
    var pageIndex = Math.floor(this.scDiv[this._scroll] / this.frameWidth);
    if(pageIndex == this.pageIndex){return};
    this.pageIndex = pageIndex;
    
    if(this.pageIndex > Math.floor(this.lDiv01[this.upright?'offsetHeight':'offsetWidth'] / this.frameWidth )){this.pageIndex = 0};
   if(typeof(this.onnowpage) === 'function'){
      this.onnowpage(this.pageIndex);
   }
    var i;
   //alert(this.pageIndex);
    for(i=0;i<this.dotObjArr.length;i++){
      if(i==this.pageIndex){
        
        this.dotObjArr[i].className = this.dotOnClassName;
      }else{
        this.dotObjArr[i].className = this.dotClassName;
      };
    };

    if(typeof(this.onpagechange) === 'function'){
      this.onpagechange();
    };
  },
  
  iPadX : 0,
  iPadLastX : 0,
  iPadStatus : 'ok',
  iPad : function(){
    if(typeof(window.ontouchstart) === 'undefined'){ //不支持触屏
      return;  
    };
    if(!this.touch){return};
    
    var tempThis = this;
    this.addEvent(this.scDiv,'touchstart',function(e){tempThis._touchstart(e)});
    this.addEvent(this.scDiv,'touchmove',function(e){tempThis._touchmove(e)});
    this.addEvent(this.scDiv,'touchend',function(e){tempThis._touchend(e)});
  },
  _touchstart : function(e){
    //if(this._state != "ready"){return};
    //this._state = 'touch';
    this.stop();
    this.iPadX = e.touches[0].pageX;
    this.iPadScrollX = window.pageXOffset;
    this.iPadScrollY = window.pageYOffset; //用于判断页面是否滚动
    this.scDivScrollLeft = this.scDiv[this._scroll];
  },
  _touchmove : function(e){
    if(e.touches.length > 1){ //多点触摸
      this.iPadStatus = 'ok';
      return;
    };
    this.iPadLastX = e.touches[0].pageX;
    var cX = this.iPadX - this.iPadLastX;
    if(this.iPadStatus == 'ok'){
      if(this.iPadScrollY == window.pageYOffset && this.iPadScrollX == window.pageXOffset && Math.abs(cX)>this.scrollWidth){ //横向触摸
        this.iPadStatus = 'touch';
      }else{
        return;
      };
    };
    this._state = 'touch';
    var scrollNum = this.scDivScrollLeft + cX;
    
    if(scrollNum >= this.lDiv01[this._sWidth]){
      scrollNum = scrollNum - this.lDiv01[this._sWidth];
    };
    if(scrollNum < 0){
      scrollNum = scrollNum + this.lDiv01[this._sWidth];
    };
    this.scDiv[this._scroll] = scrollNum;
    e.preventDefault();
  },
  _touchend : function(e){
    if(this.iPadStatus != 'touch'){return};
    this.iPadStatus = 'ok';
    //this._state = 'ready';
    var cX = this.iPadX - this.iPadLastX;
    if(cX<0){
      this.rightEnd();
    }else{
      this.leftEnd();
    };
    this.play();
  },
  $ : function(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}},
  isIE : navigator.appVersion.indexOf("MSIE")!=-1?true:false,
  
  //Event
  addEvent : function(obj,eventType,func){if(obj.attachEvent){obj.attachEvent("on" + eventType,func);}else{obj.addEventListener(eventType,func,false)}},
  delEvent : function(obj,eventType,func){
    if(obj.detachEvent){obj.detachEvent("on" + eventType,func)}else{obj.removeEventListener(eventType,func,false)}
  },
  //Cookie
  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},
  
  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},
  //Style
  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}}
};
   
   


    
    


     复制代码			第二种方法-------性能感觉较好



     
     
jquery.touchslider.min.js   导入这个js


     


    
    


    
    
            <div class="bannerSlider red">
                <div class="touchslider">
                    <div class="touchslider-viewport">
                        <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg01.jpg"/></a></div>
                        <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg05.jpg"/></a></div>
                        <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg03.jpg"/></a></div>
                        <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg04.jpg"/></a></div>
                        <div class="touchslider-item"><a href="#"><img src="../images/temp/bannerImg06.jpg"/></a></div>
                    </div>
                    <div class="touchslider-navtag">


    
    
　　　　　　　　　　   <!--<span class="touchslider-prev">←</span> -->
                        <span class="touchslider-nav-item touchslider-nav-item-current"></span>
                        <span class="touchslider-nav-item "></span>
                        <span class="touchslider-nav-item "></span>
                        <span class="touchslider-nav-item "></span>
                        <span class="touchslider-nav-item "></span>
　　　　　　　　　　　<!-- <span class="touchslider-next">→</span> -->

                    </div>
                </div>


    
    

     
     css 代码复制代码
    
    


    
    


     


     
     
.touchslider,.touchslider div,.touchslider a,.touchslider img{
    font-style: normal;
    vertical-align: top;
   padding:0px; margin:0px;
   border:0px;
}
.touchslider{position:relative;margin:0 -12px;}
.touchslider .touchslider-viewport { overflow:hidden; height:150px;}
.touchslider .touchslider-viewport .touchslider-item a{z-index:1;width:100%;display:block;}
.touchslider .touchslider-viewport .touchslider-item img{ width:100%;}
.touchslider .touchslider-navtag{text-align:center;height:34px;display:inline-block;vertical-align:middle;margin-top:-8px;width:100%}
.touchslider .touchslider-navtag span{width:14px;height:2px;background:#c1c1c1;overflow:hidden;display:inline-block; }
.touchslider .touchslider-navtag .touchslider-nav-item-current{background:#ff7363;}


     


    
    


    
    

     
     javascript代码控制启动就可以了
    
    


    
    

     
     

    
    


    
    


     


     
     
<script>
jQuery(function($) {
   $(window).resize(function(){
      var width=$('#js-com-header-area').width();
      $('.touchslider-item a').css('width',width);
      $('.touchslider-viewport').css('height',300*(width/640));
   }).resize();

   $(".touchslider").touchSlider({mouseTouch: true, autoplay: true});
});
</script>


     


    
    


   
   

   
   


    
    
               $(".touchslider").touchSlider({mouseTouch:true, autoplay:true});//幻灯片轮播图
　　　　　　　 　$(".touchslider").data("touchslider").stop(); // 结束滚动
　　　　　　　 　$(".touchslider").data("touchslider").start(); // 开始滚动


    
    
 


   
   
jquery.touchslider.min.js用于移动网页图片滚动，同时适用于触摸、鼠标操作的幻灯片交互脚本，依赖 jQuery，需要导入jquery。插件默认会将第二页的内容隐藏


文章标签：
对象存储
Web App开发
移动开发
JavaScript
前端开发
HTML5
关键词：
HTML方法
移动开发方法
移动开发HTML
移动开发html5
相关实践学习
借助OSS搭建在线教育视频课程分享网站
本教程介绍如何基于云服务器ECS和对象存储OSS，搭建一个在线教育视频课程分享网站。
keller.zhou
目录
相关文章
小吴吴吴呀
|
6月前
|
存储 移动开发 JavaScript
HTML5中form表单防止重复提交的两种方法
HTML5中form表单防止重复提交的两种方法
小吴吴吴呀
123 2
你挚爱的强哥
|
6月前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
你挚爱的强哥
57 1
六卿
|
2月前
|
移动开发 前端开发 HTML5
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
本文介绍了Twaver HTML5中数据的批量加载方法，通过使用`box.startBatch()`可以在大量数据加载时提高性能。文章通过示例代码展示了如何在React组件中使用批量加载功能，以减少界面重绘次数并提升效率。
六卿
55 1
Twaver-HTML5基础学习(20)数据容器(3)_数据的批量加载(节省性能方法)
奔跑的数据
|
4月前
|
Web App开发 数据采集 移动开发
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
在Selenium中优化Chrome的HTML5视频捕获涉及更新Chrome和ChromeDriver、配置浏览器选项、使用代理IP、调整加载策略及确保安装了正确编解码器。例如，更新驱动程序，添加如`--autoplay-policy`和`--proxy-server`的命令行参数，使用代理以防止被封，设置页面加载策略为&#39;eager&#39;，并安装必要的编解码器来确保视频播放。代码示例展示了如何集成这些优化措施。
奔跑的数据
147 2
提升Selenium在Chrome上的HTML5视频捕获效果的五个方法
Li370234940
|
1月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
Li370234940
18 1
html的七十二变
|
2月前
|
存储 编解码 前端开发
HTML颜色的性能优化方法
在网页开发中，虽然颜色选择并非主要性能瓶颈，但合理的颜色优化仍可提升渲染效率与用户体验。本文介绍十种实用技巧，如使用CSS渐变代替图片、运用CSS变量存储颜色、合理选择颜色格式、减少页面颜色种类、按需加载样式表等，帮助改善网页性能。尽管单独来看颜色优化的影响有限，但综合应用这些技巧能够有效提升网页加载速度及整体体验。
html的七十二变
54 13
听白
|
2月前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
听白
14 2
蓝易云
|
2月前
|
XML 数据格式 Python
Python技巧：将HTML实体代码转换为文本的方法
在选择方法时，考虑到实际的应用场景和需求是很重要的。通常，使用标准库的 `html`模块就足以满足大多数基本需求。对于复杂的HTML文档处理，则可能需要 `BeautifulSoup`。而在特殊场合，或者为了最大限度的控制和定制化，可以考虑正则表达式。
蓝易云
55 12
html的七十二变
|
2月前
|
JavaScript 前端开发
HTML 表单和输入与按钮的联动方法汇总
在HTML中，通过JavaScript可以轻松实现表单与输入、按钮的互动。本文介绍了基本表单结构，并展示了如何用JS处理按钮点击、表单提交、动态禁用按钮、表单验证以及使用AJAX和jQuery简化代码等技巧，帮助你更好地控制和优化表单功能。
html的七十二变
46 2
Li370234940
|
1月前
|
JavaScript 前端开发
DOM的概念？获取html元素的方法有哪些？
DOM的概念？获取html元素的方法有哪些？
Li370234940
28 0

热门文章

最新文章

  • 1
    weex-html5 组件进阶
  • 2
    HTML，javascript，Json数据在线格式化工具
  • 3
    HTML学习4----表单控件
  • 4
    jquery插件整理篇（六）HTML编辑器插件
  • 5
    html5 开发android
  • 6
    过滤代码中的html标签
  • 7
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 8
    HTML DOM 教程Part1
  • 9
    六个好看实用的html简单登录页面源码
  • 10
    HTML元素 属性 格式化标签
  • 1
    移动应用开发的未来：跨平台框架与原生系统之争
    60
  • 2
    探索移动应用开发的未来：跨平台工具与原生系统的挑战
    45
  • 3
    移动应用开发的未来：跨平台框架与原生操作系统的融合
    32
  • 4
    移动应用开发的未来：Flutter与Android的深度融合
    71
  • 5
    移动应用开发的未来：跨平台框架与原生系统协同进化
    72
  • 6
    移动应用开发的未来：跨平台框架与原生系统的融合
    50
  • 7
    移动应用开发的未来：跨平台框架与原生系统的融合
    55
  • 8
    移动应用开发的未来趋势：跨平台与原生之争
    99
  • 9
    探索移动应用开发的未来：跨平台框架与原生操作系统的融合
    54
  • 10
    移动应用开发的未来趋势：跨平台与原生之争
    71

    • 相关课程

    更多
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础
  • jQuery开发教程

    • 相关电子书

    更多
  • 天猫HTML5互动技术实践
  • Re: 移动开发的未来 来自一个微信移动开发者的自白
  • Re：移动开发的未来—来自一个微信移动开发者的自白

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
  • HTML及前端框架
  • CSS基础教程
    • 下一篇
    DataWorks智能数据建模全面公测开始啦！