SevgiliD
SevgiliD

【移动端网页特效】02-移动端轮播图（原生JS）

移动端轮播图

  • 原生JS实现移动端轮播图
    • 结构搭建
      • html代码&css代码
    • 实现思路
    • JS核心代码

原生JS实现移动端轮播图

结构搭建

html代码&css代码

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style-type: none;
        }

        a {
            text-decoration: none;
        }

        .banner-wrap {
            width: 100vw;
            background-color: #bfa;
        }

        .banner-wrap .banner {
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
        }

        /* 设置ul */
        .slider-wrap {
            width: 500%;
            /* 设置应该显示的第一张图片，而非复制的放在最前边的最后一张图 */
            margin-left: -100%;
        }

        .slider-wrap li {
            width: 20%;
            height: 20vh;
            float: left;
        }

        .slider-wrap img {
            width: 100%;
        }

        /* 设置小圆圈 */
        .pointer {
            position: absolute;
            bottom: 15px;
            right: 15px;

        }

        .pointer li {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            list-style-type: none;
            display: inline-block;
            background-color: hsla(0, 0%, 100%, .4);

        }

        .pointer li.current {
            width: 18px;
        }
    style>
head>

<body>
    <div class="banner-wrap">
        
        <div class="banner">
            <a href=""><span>特价直播span><span>特价好货直播中span>a>
            
            <ul class="slider-wrap">
                <li class="slider"><a href=""><img src="../../images/p-banner3.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner1.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner2.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner3.jpg" alt="">a>li>
                <li class="slider"><a href=""><img src="../../images/p-banner1.jpg" alt="">a>li>
            ul>
            
            <ol class="pointer">
                <li class="current">li>
                <li>li>
                <li>li>
            ol>
        div>
    div>

实现思路

  1. 图片滚动：移动端没有兼容性问题，此时可以不必使用之前的动画函数，才用定时器和css动画中的transform：translate及transition结合实现滚动动画效果
  2. 无缝滚动：同理PC端需要将第一张添加到最后一张后，需要将最后一张添加到第一张前；pc端为鼠标点击事件，移动端为触摸点拖动
  3. 小圆圈跟随变化：单独设置current样式，用classList切换类current（PC端时才用的排他写法）；图片过渡之后小圆圈再变化，用到transitionend事件

classList属性的用法：
【移动端网页特效】02-移动端轮播图（原生JS）_第1张图片在这里插入图片描述

  1. 手指滑动轮播图：本质是ul跟随手指移动，简单说就是移动端的拖动元素功能； 利用触摸事件touchstart来获取手指初始坐标； touchmove来计算手指的滑动距离，并且移动盒子； touchend手指离开事件通过滑动的距离判断不同的情况： 如果移动距离小于某个像素，就回弹到原来的位置，如果移动距离大于某个像素就滑动到上一张或者下一张
  2. 性能优化1：当我们点击轮播图的图片时，又不想移动了，这时候手指离开需要执行一大段代码。优化办法为：加一个flag全局变量，只有当手指真的移动了，才执行手指离开的一系列代码操作
  3. 性能优化2：如果屏幕比较长，手指在移动轮播图的过程可能会滚动屏幕。优化方法为：取消默认滚动屏幕的行为。在touchmove事件里加上e.preventDefault();即可

JS核心代码

<script>
        // 获取元素
        var ul = document.querySelector('.slider-wrap');
        var lis = ul.querySelectorAll('li');
        var banner = document.querySelector('.banner');
        var ol = banner.lastElementChild;
        // 1.图片滚动
        // 获取banner宽度
        var w = banner.offsetWidth;
        var index = 0;
        var timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            // ul.style.transform = 'translateX('+ translatex + ' px)';//这个就不行？
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
        // 2.无缝滚动
        // 等图片过渡完成之后，再去判断监听过渡完成的事件
        ul.addEventListener('transitionend', function () {
            console.log(1);
            if (index >= 3) {
                index = 0;
                // 去掉过渡，让ul快速跳到目标位置
                ul.style.transition = 'none';
                //利用最新的索引号乘以宽度 继续滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';
            } else if (index < 0) {
                index = 2;
                ul.style.transition = 'none';
                //利用最新的索引号乘以宽度 继续滚动图片
                var translatex = -index * w;
                ul.style.transform = 'translateX(' + translatex + 'px)';

            }
            // 3.小圆点跟随变化
            ol.querySelector('.current').classList.remove('current');
            ol.children[index].classList.add('current');

        })


        // 4. 手指滑动轮播图
        // 触摸元素touchstart：获取手指初始坐标
        var startX = 0;
        var moveX = 0;  // 后面会使用这个移动距离，所以要定义为全局变量
        var flag = false;  //用来标志手指是否真的移动，还是只是点击
        ul.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX;
            // 手指触摸的时候就停止定时器
            clearInterval(timer);
        });
        // 移动手指touchmove：计算手指的滑动距离，并且移动盒子
        ul.addEventListener('touchmove', function (e) {
            // 计算移动距离
            // e.targetTouches[0]为第一个手指，[1]表示第二个手指
            moveX = e.targetTouches[0].pageX - startX;
            // 移动盒子：盒子原来的位置 + 手指移动的距离
            var translateX = -index * w + moveX;
            // 手指拖动的时候，不需要动画效果，所以要取消过渡效果
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
            flag = true;
            e.preventDefault();   //组织滚动屏幕的行为
        });
        // 手指离开，根据移动距离去判断是回弹还是播放上一张或者下一张
        ul.addEventListener('touchend', function (e) {
            // 只有手指移动过了，才执行下面的代码
            if (flag) {
                //（1）如果移动距离大于50像素，则播放上一张或者下一张
                if (Math.abs(moveX) > 50) {
                    // 如果是右滑就是播放上一张，moveX是正值
                    if (moveX > 0) {
                        index--;
                    } else {
                        // 如果是左滑就是播放下一张，moveX是负值
                        index++;
                    }
                    // 用最新的index乘以宽度
                    var translateX = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = 'translateX(' + translateX + 'px)';
                } else {
                    //（2）如果移动距离小于50像素就回弹
                    var translateX = -index * w;
                    ul.style.transition = 'all .1s';
                    ul.style.transform = 'translateX(' + translateX + 'px)';
                }
            }
            // 手指离开的时候就重新开启定时器
            // 注意：开启定时器之前要先清空之前的定时器，保证当前只有一个定时器在执行
            clearInterval(timer);
            timer = setInterval(function () {
                index++;
                var translateX = -index * w;
                // 添加动画效果
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translateX + 'px)';
            }, 2000);
        });


    </script>

你可能感兴趣的:(JavaScript初级,【前端学习笔记】,javascript,css,css3)

  • JSON简介及其应用 Jackson@ML MongoDBJavaScriptNode.jsjsonJavaScriptNode.js
    JSON简介及其应用[email protected]的概念JSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，采用键值对（key-value）的方式组织数据，语法类似JavaScript对象，易于人阅读和机器解析。2.JSON的作用JSON有几方面的作用如下：•在前后端数据交互中传
  • iOS 26中的 Liquid Glass 设计理念与 CSS 的 UI 实现 duxweb ioscssui
    引言2025年6月，苹果在WWDC2025上发布了令人惊艳的iOS26，引入了全新的"LiquidGlass"（液态玻璃）设计语言。这被苹果称为"有史以来最广泛的软件设计更新"，不仅彻底重新定义了iOS的视觉语言，更是为整个移动界面设计领域带来了全新的思路。本文将深入探讨LiquidGlass设计理念的核心思想，并提供详细的CSS实现方案，帮助开发者在Web项目中实现类似的视觉效果。LiquidG
  • 驾驭代码之道：JS/TS SOLID面向对象设计的五大黄金法则 领码科技 低代码技能篇javascript开发语言SOLID原则TypeScript面向对象代码设计AI辅助开发
    摘要在现代JavaScript和TypeScript开发中，代码质量与可维护性至关重要。SOLID原则作为面向对象设计的经典法则，为构建稳健、灵活的系统架构提供了科学指导。本文不仅系统阐释单一职责、开闭、里氏替换、接口隔离和依赖倒置五大原则的核心精髓，还结合当今流行的AI智能辅助、微前端、低代码开发等新技术与新思维，深入剖析它们在实际JS/TS项目中的应用场景和最佳实践。通俗易懂的理论讲解、丰富的
  • JavaScript 事件循环竟还能这样玩! 前端javascript
    JavaScript是一种单线程的编程语言，这意味着它一次只能执行一个任务。为了能够处理异步操作，JavaScript使用了一种称为事件循环（EventLoop）的机制。本文将深入探讨事件循环的工作原理，并展示如何基于这一原理实现一个更为准确的setTimeout、setInterval什么是事件循环？事件循环是JavaScript运行时环境中处理异步操作的核心机制。它允许JavaScript在执
  • 模拟工作队列 - 华为OD机试真题(JavaScript卷) 什码情况 算法面试javascript数据结构华为od
    华为OD机试题库《C++》限时优惠9.9华为OD机试题库《Python》限时优惠9.9华为OD机试题库《JavaScript》限时优惠9.9针对刷题难，效率慢，我们提供一对一算法辅导，针对个人情况定制化的提高计划（全称1V1效率更高）。看不懂有疑问需要答疑辅导欢迎私VX：code5bug题目描述让我们来模拟一个工作队列的运作，有一个任务提交者和若干任务执行者，执行者从1开始编号。提交者会在给定的时
  • 数据分类 - 华为OD机试真题(JavaScript 题解) 什码情况 华为odjavascript开发语言数据结构算法机试
    华为OD机试题库《C++》限时优惠9.9华为OD机试题库《Python》限时优惠9.9华为OD机试题库《JavaScript》限时优惠9.9针对刷题难，效率慢，我们提供一对一算法辅导，针对个人情况定制化的提高计划（全称1V1效率更高）。看不懂有疑问需要答疑辅导欢迎私VX：code5bug题目描述对一个数据a进行分类，分类方法为：此数据a（四个字节大小）的四个字节相加对一个给定的值b取模，如果得到的
  • ROS学习笔记5：常用API和模块导入
    前言本人ROS小白，利用寒假时间学习ROS，在此以笔记的方式记录自己每天的学习过程。争取写满15篇(5/15)。环境：Ubuntu20.04、ROS1：noetic环境配置：严格按照下方学习链接的教程配置，基本一次成功。学习链接：【Autolabor初级教程】ROS机器人入门对应链接文档：ROS机器人入门课程《ROS理论与实践》笔记绝大部分代码使用Python语言编写。本期关键词：初始化，话题服务
  • React - 错误边界（Error boundary） 风轻轻~ #React__基础react.js
    React-错误边界（Errorboundary）一.理解二.使用1.使用方式2.使用案例错误边界：https://zh-hans.reactjs.org/docs/error-boundaries.html一.理解部分UI的JavaScript错误不应该导致整个应用崩溃，为了解决这个问题，React16引入了一个新的概念——错误边界。错误边界是一种React组件，这种组件可以捕获发生在其子组件树
  • Tailwind CSS自定义用法 TE-茶叶蛋 面试复习系列csscss前端
    文章目录前言✅一、集成TailwindCSS到React项目1.安装依赖2.配置`tailwind.config.js`3.创建全局样式文件（如`src/index.css`）@tailwindbase;@tailwindcomponents;@tailwindutilities;4.在`main.tsx`或`main.jsx`中引入样式✅二、自定义样式方式汇总1.`theme.extend`自定
  • 函数的进阶 小盐巴小严 web前后端开发学习笔记javascript前端es6
    JavaScript函数概念构成函数主体的JavaScript代码在定义之时并不会执行，只有在调用函数时，函数才会执行。调用JavaScript函数的方法：作为函数作为方法作为构造函数通过函数的call（）和apply（）间接调用函数属性length属性在函数体例，arguments.length表示传入函数的实参的个数函数本身的length属性是只读的，代表函数声明的实际参数的数量functio
  • JavaScript基础-常见网页特效案例 咖啡の猫 javascript开发语言ecmascript
    一、前言在前端开发中，实现网页特效（如轮播图、下拉菜单、Tab切换、拖拽效果等）是提升用户体验和页面交互性的关键手段之一。这些特效不仅能增强用户对网站的粘性，也是衡量一个前端开发者能力的重要标准。JavaScript是实现网页特效的核心技术之一，结合HTML和CSS，可以轻松构建丰富的交互效果。本文将带你深入了解：常见网页特效的实现原理；如何使用原生JavaScript实现经典特效；每个案例附带完
  • JavaScript基础-触屏事件 咖啡の猫 javascript开发语言ecmascript
    一、前言随着移动端设备的普及，网页不仅要适配PC浏览器，更要兼容手机和平板等触摸设备。传统的鼠标事件（如click、mousedown等）在触控操作中存在一定的延迟和局限性，因此JavaScript提供了专门用于处理触摸操作的API——触屏事件（TouchEvents）。本文将带你深入了解：触屏事件的基本概念；常见的触屏事件类型（touchstart、touchmove、touchend等）；如何
  • JavaScript 核心对象深度解析：Math、Date 与 String 小宁爱Python 前端javascript开发语言ecmascript
    JavaScript作为Web开发的核心语言，提供了丰富的内置对象来简化编程工作。本文将深入探讨三个重要的内置对象：Math、Date和String，通过详细的代码示例和综合案例帮助你全面掌握它们的用法。一、Math对象Math对象提供了一系列静态属性和方法，用于执行各种数学运算，无需实例化即可使用。常用属性：console.log(Math.PI);//圆周率:3.141592653589793
  • 零基础打造优雅的AI诗词创作助手 BaiYiQingXiang99 html人工智能chatgpt
    零基础打造优雅的AI诗词创作助手：一个纯前端实现的智能写诗工具项目介绍大家好，今天要和大家分享我的一个AI项目——AI诗词创作助手。这是一个完全使用原生JavaScript开发的智能写诗工具，不需要复杂的框架，也不需要后端服务器，就能实现专业级的AI诗词创作功能。在线体验地址GitHub地址主要特性1.多样化的创作选项支持多个主流AI模型（Deepseek、Moonshot(Kimi)、通义千问）
  • 从入门到精通：前端工程师必学的 JSON 全解析 前端视界 前端json状态模式ai
    从入门到精通：前端工程师必学的JSON全解析关键词：JSON、前端工程师、数据交换、JavaScript、数据格式摘要：本文围绕前端工程师必学的JSON展开全面解析。从JSON的基本概念、背景知识入手，深入探讨其核心原理、算法实现、数学模型等方面。通过详细的代码示例和实际应用场景分析，帮助前端工程师从入门到精通掌握JSON的使用。同时，提供了丰富的学习资源、开发工具和相关论文推荐，最后对JSON的
  • 总结自适应网站的标准尺寸 scuter_yu web前端
    转载字自"深蓝的镰刀"偶然翻阅国外标准模板，总结一下在使用css3的mediaquery做自适应网站时究竟min-width和max-width设多少是最好的。PC机时：[css]viewplaincopy@mediaonlyscreenand(min-width:960px){*{color:red;}}平板横放时：[css]viewplaincopy@mediaonlyscreenand(mi
  • Appcelerator打包ipa有哪些优势 咕噜企业签名分发-大圣 数据仓库
    Appcelerator打包ipa的优势主要包括以下几点：一、跨平台开发能力Appcelerator为开发者提供了一种独特的跨平台开发解决方案，允许他们使用统一的JavaScript代码库来构建适用于iOS和Android等多个平台的应用程序。这种开发模式不仅大大简化了开发流程，还显著减少了开发时间和成本。开发者无需为每个平台分别编写和维护代码，从而避免了重复劳动和潜在的错误。此外，跨平台开发还意
  • vue中css使用data中的变量 console.log( ) #vuevue.jscssjavascript
    封装一个ui组件，组件的样式一般是多种多样的我们可以通过组件传值的方式将ui属性传递给组件，但是我们属性是在js中可以拿到，vue3之前css是无法直接获取的(vue3中已经可以直接获取，可以去学习一下)通过vars那么在vue2中，我们要借助setProperty函数写一个简单的例子helloworldexportdefault{data(){return{color:'red'}},mount
  • 视频云平台HTML5播放器使用文档(CuPlayer平台) 阿酷tony 酷播云（免费云存储）音视频html5前端
    视频云平台HTML5播放器使用文档(CuPlayer平台)varplayer=polyvPlayer({wrap:'#player',width:800,height:533,vid:'88083abbf5535a4d7b4d8614427559e0_8',});选项参数类型默认值说明wrapstring/HTMLElement-页面上存在需要载入播放器的DOM元素或css选择器widthnumb
  • 鹅厂JS面试题——0.1+0.2=0.3吗? 孤舟蓑影 JavaScriptjavascript开发语言ecmascript前端学习
    首先公布答案:在JavaScript中，0.1+0.2≠0.3为什么？JavaScript中的数字使用IEEE754标准的双精度浮点数（64位）进行表示。这种表示方式在处理十进制小数时，不能精确地表示某些数字。比如0.1和0.2这样的十进制小数，在转换成二进制浮点数时会产生无限循环的小数，导致它们在内存中只能近似表示。0.1在二进制中表示为一个近似值：0.000110011001100110011
  • 《三生原理》如何优化注意力机制？
    AI辅助创作：《三生原理》通过融合《周易》哲学的数理模型，对注意力机制进行了多维度优化，主要体现在动态计算重构、位置编码革新与训练效率提升三方面，具体路径如下：‌一、动态筛网替代传统注意力计算‌‌三级筛网分层过滤‌‌初级筛网‌：基于素数参数化公式（p=3(2n+1)+2(2n+m+1)）预判无效特征交互，压缩注意力计算范围，减少多头冗余计算45%。‌中级判据‌：引入五行属性权重动态分配机制，依据模
  • 浏览器的垃圾回收机制 甘露寺 js浏览器javascript前端
    深入解析现代浏览器的垃圾回收机制：分代回收与标记清除算法本文详细探讨了Chrome、Firefox等现代浏览器中JavaScript引擎的垃圾回收（GC）原理，重点讲解分代回收策略和标记清除/整理算法的工作流程，并通过示例帮助理解内存自动管理背后的机制。为什么需要垃圾回收？JavaScript是一种自动内存管理的语言。开发者通常不需要手动分配或释放内存（如C/C++中的malloc/free）。这
  • for...in 与 for...of的区别是啥？用错后果很严重
    for…in与for…of循环详解在JavaScript中，for...in和for...of是两种常用的循环语句，但它们在使用场景和行为上有显著区别。下面我将详细解释它们的差异，并通过示例代码进行说明。核心区别对比表特性for...infor...of遍历目标对象的可枚举属性可迭代对象的值返回值类型键名（key）值（value）适用对象普通对象、数组（不推荐）数组、字符串、Map、Set、Nod
  • v-if、display、visibility、opacity隐藏元素的区别 甘露寺 前端vuereact
    前端元素隐藏与条件渲染完全指南（Vuevs.Reactvs.CSS）本文对比v-if、v-show、display:none、opacity:0、visibility:hidden以及React条件渲染的差异，帮你彻底掌握它们的适用场景！核心概念1.DOM树vs.渲染树DOM树：完整的HTML节点结构（无论是否隐藏）。渲染树：浏览器实际绘制到屏幕上的内容（隐藏元素可能被跳过）。2.关键差异特性是否
  • JavaScript 原型链继承中的引用类型陷阱
    JavaScript原型链继承中的引用类型陷阱本文通过一个生动的案例，解析JavaScript原型链继承中引用类型属性的共享问题，帮助开发者理解原型链机制并避免常见陷阱。问题代码展示//父类构造函数functionAnimal(){this.skills=['eat','sleep'];//引用类型属性this.mouse=1;//基本类型属性this.name='Animal';this.sho
  • 一个 CSS 属性如何彻底解决布局难题 @大迁世界 css前端
    设计稿中的组件常常精致、规整，但一旦进入开发阶段，尤其是响应式场景中，部分UI就容易失控。例如：一个包含图片、视频或需保持固定比例的卡片网格组件。表面看似简单，实则暗藏大量布局陷阱。为了解决这些问题，许多项目中采用了监听resize事件、手动计算宽高比、动态注入style属性等方式。虽然功能实现了，但代码臃肿、可维护性差、兼容性问题频出。直到一个CSS属性出现：aspect-ratio。结果令人惊
  • CSS 与 JavaScript 加载优化 甘露寺 cssjavascript前端
    CSS与JavaScript加载优化指南：位置、阻塞与性能让你的网页飞起来！本文详细解析CSS和JavaScript标签的放置位置如何影响页面性能，涵盖阻塞原理、浏览器机制和最佳实践。掌握这些知识可显著提升用户体验和SEO排名！一、核心问题：为什么位置很重要？浏览器渲染页面时需经历：解析HTML→2.下载资源→3.执行脚本→4.渲染页面错误的位置会阻塞关键路径，导致：⚠️长时间白屏（脚本阻塞）样式
  • react gsap动画库使用详解之scroll滑动动画 伍哥的传说 前端源码分享react.js前端前端框架vue.jsvue动画javascript
    简介gsap高性能的JavaScript动画库，在现代网页设计和开发中运用。安装npminstallgsapReact框架中使用可以考滤使用react-gsap-enhancer库，或者@gasp/react。类组件使用react-gsap-enhancer高阶组件，函数组件使用@gasp/react自定义Hook。npminstallreact-gsap-enhancer#oryarnaddre
  • Tailwind CSS工作原理 TE-茶叶蛋 csscsstensorflow前端
    文章目录前言1.指令解析与AST操作**核心处理流程****具体流程说明**2.**配置驱动的样式生成**3.**JIT模式（Just-In-Time）的核心逻辑**4.**插件与自定义扩展**5.**与PostCSS管道的协同**6.**优化与TreeShaking**关键源码逻辑（简化）关键技术细节（底层机制总结）前言TailwindCSS本质上是一个PostCSS插件，其底层工作原理可以拆解
  • #Vue3篇： vue3梳理 ：&ref自动解包&key使用 程序员xiaolibao Vue3篇vue
    vue3Attribute绑定同名简写如果attribute的名称与绑定的JavaScript值的名称相同，那么可以进一步简化语法，省略attribute值在模板中使用ref时，我们不需要附加.value。为了方便起见，当在模板中使用时，ref会自动解包(有一些注意事项)。import{ref}from'vue'exportdefault{setup(){constcount=ref(0)func
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他