coder-lxy
coder-lxy

轮播图制作，详细步骤及 HTML+CSS+JS 完整代码

1.轮播图的结构


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <link rel="stylesheet" href="style/index.css">
    <script src="js/index.js">script>
    <script src="js/animate.js">script>
head>
<body>
    <div class="banners">
        <ul class="images">
             
            <li>
                <a href="#"><img src="images/test1.jpg" alt="">a>
            li>           
            <li>
                <a href="#"><img src="images/test3.jpg" alt="">a>
            li>       
            <li>
                <a href="#"><img src="images/test4.jpg" alt="">a>
            li>       
            <li>
                <a href="#"><img src="images/test5.jpg" alt="">a>
            li>                 
        ul> 
        
        <a href="javascript:;" class="prev"> <a>
        
        <a href="javascript:;" class="next"> >a>
        
        <ul class="dots">
            
        ul>
    div>
body>
html>

2. 轮播图样式

新建style文件夹 和里面的index.css文件 内容如下：

/* 1. 样式重置 */
* {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
}

/* 外层盒子样式,左右箭头和小圆点都要采用绝对定位，所以其父盒子要采用相对定位*/
.banners {
    position: relative;
    overflow: hidden;
    width: 520px;
    height: 280px;
    margin: 100px auto;
}
/*滚动区 包裹所有图片的盒子 宽度要足够宽可以放下所有的图片*/
.images {
    position: absolute;
    top: 0;
    left: 0;
    width: 700%;
}
/* 对图片使用浮动 使其排列在一行*/
.images li{
    float: left;
}
/* 图片大小会撑大盒子,设置图片大小 */
.banners img {
    width: 520px;
    height: 280px;
}
/*左右箭头相同样式*/
.prev,
.next {
    display: none;
    position: absolute;  
    /* 绝对定位的盒子垂直居中 */
    top: 50%;
    margin-top: -15px;
    width: 20px;
    height: 30px;
    background: rgba(0,0,0, .3);
    text-align: center;
    line-height: 30px;
    color: #fff;
    text-decoration: none; 
}
/*左箭头靠左定位*/
.prev {
    left: 0;
     /* 设置圆角 */
     border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
/*右箭头靠右定位*/
.next {
    right: 0;
    /* 设置圆角 */
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
/* 小圆点外层盒子的样式 */
.dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -35px;
    height: 13px;
    background:rgba(255,255,255, .3);
    border-radius:7px;
}
/* 小圆点样式*/
.dots li {
    float: left;
    width: 8px;
    height: 8px;
    background-color: #fff;
    border-radius: 50%;
    margin: 3px;
}
/* 小圆点被点击的样式 */
.dots .active {
    background-color: #ff5000;
}

3. 轮播图功能

  1. 鼠标经过轮播图 左右箭头显示， 鼠标离开 左右箭头隐藏；
  2. 点击左右箭头，图片切换，底下的小圆点也会对应变化
  3. 点击小圆点，也能实现切换图片效果
  4. 鼠标不经过轮播图，自动播放
  5. 鼠标经过轮播图，自动播放停止

新建js文件夹和里面的index.js文件，内如如下

window.addEventListener('load', function () {
    //1. 获取元素
    var prev = document.querySelector('.prev');
    var next = document.querySelector('.next');
    var banners = document.querySelector('.banners')

    //2. 鼠标经过，显示左右按钮
    banners.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;//清除计时器
    });
    //3. 鼠标离开，隐藏左右按钮
    banners.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function () {
            // 轮播图自动切换 相当于点击右箭头
            next.click();
        }, 2000);
    });
    // 4. 动态生成小圆圈 有几张图片，就生成几个小圆圈
    var images = document.querySelector('.images');
    var dots = document.querySelector('.dots');
    var banners_width = banners.offsetWidth;
    for (var i = 0; i < images.children.length; i++) {
        //创建一个小li
        var li = document.createElement('li');
        //记录当前小圆圈的索引号 通过创建自定义属性来做
        li.setAttribute('index', i);
        dots.appendChild(li);
        //5. 小圆圈的排他思想 可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function () {
            for (var i = 0; i < dots.children.length; i++) {
                dots.children[i].className = '';
            }
            this.className = 'active';
            // 6. 点击小圆圈，移动图片，本质移动的是ul
            //ul 的移动距离 就是小圆圈的索引号 * 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到它的index属性
            var index = this.getAttribute('index');
            //当我们点击了某个小li 就要把这个小li 的index给num
            num = index;
            circle = index;
            animate(focus, -index * banners_width);
        })
    }
    //把dots 里面的第一个小li设置类名为 active
    dots.children[0].className = 'active';
    // 实现滑动到最后一张照片时 可以平滑地过渡到第一张，克隆第一张图片 放在ul最后面，在其后克隆小圆点不会多
    var first = images.children[0].cloneNode(true);
    images.appendChild(first);

    // 点击右侧按钮，图片滚动一张
    var num = 0;
    //circle 控制小圆圈的播放
    var circle = 0;
    next.addEventListener('click', function () {
        // 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
        if (num == images.children.length - 1) {
            images.style.left = 0;
            num = 0;
        }
        num++;
        animate(images, -num * banners_width);
        // 8. 点击右侧按钮，小圆圈跟随一起变化
        circle++;
        if (circle == dots.children.length) {
            circle = 0;
        }
        circleChange();
    })
    //左侧按钮点击事件
    prev.addEventListener('click', function () {
        // 如果走到了最后复制的一张图片，此时的ul要快速复原 left值改为零
        if (num == 0) {
            num = images.children.length - 1;
            images.style.left = -num * banners_width + 'px';
        }
        num--;
        animate(images, -num * banners_width)
        // 8. 点击右侧按钮，小圆圈跟随一起变化
        circle--;
        circle = circle < 0 ? dots.children.length - 1 : circle;
        //调用函数
        circleChange();
    })
    function circleChange() {
        for (var i = 0; i < dots.children.length; i++) {
            dots.children[i].className = '';
        }
        dots.children[circle].className = 'active';
    }
    var timer = setInterval(function () {
        //手动调用点击事件
        next.click();
    }, 2000);

})

新建js文件里的animate文件 内容如下：

function animate(obj, target,callback) {
    //让元素只有一个定时器在执行，需要清除以前的定时器
    clearInterval(obj.timer);
    obj.timer = setInterval(function () {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质是停止定时器
            clearInterval(obj.timer)
            //回调函数写到定时器结束位置
            if(callback) {
                callback();
            }

        }
        //把每次加1这个步长值改为一个慢慢变小的值
        obj.style.left = obj.offsetLeft + step + 'px';
    }, 15);
}

你可能感兴趣的:(轮播图制作，详细步骤及 HTML+CSS+JS 完整代码)

  • 从零开始学习PPT全攻略 破碎的天堂鸟 学习教程学习PPT
    学习制作PPT是一个循序渐进的过程，从基础操作到设计思维再到实战技巧，逐步提升能力。以下是分阶段的学习路径建议：一、基础阶段：快速掌握工具操作软件选择微软PowerPoint（最主流，功能全面）WPS演示（国产免费，模板丰富）GoogleSlides（在线协作方便）Canva（设计小白友好，适合快速出图）核心功能速成快捷键：Ctrl+S（保存）、Ctrl+Z（撤销）、Ctrl+C/V（复制粘贴）、
  • Audacity的安装和使用 迷茫&&前行 ctf工具Audacityctf
    安装下载地址：官方网站：Audacity软件开源免费，但部分功能可能需要额外插件。一.介绍Audacity是一款免费、开源的音频编辑软件，适用于Windows、macOS、Linux等操作系统。它支持多轨编辑、录音、音频效果处理、格式转换等功能，适合音乐制作、播客编辑、音频修复等场景。主要功能：录音：支持麦克风、线路输入等多种音源。编辑：提供剪切、复制、粘贴、删除等基本操作，支持多轨编辑。效果处理
  • 每日一练题目及题解6 全保AC 「已注销」 #各大编程比赛题目解析c++
    一.最长公共子序列描述给你一个序列X和另一个序列Z，当Z中的所有元素都在X中存在，并且在X中的下标顺序是严格递增的，那么就把Z叫做X的子序列。例如：Z=是序列X=的一个子序列，Z中的元素在X中的下标序列为。现给你两个序列X和Y，请问它们的最长公共子序列的长度是多少？输入描述输入包含多组测试数据。每组输入占一行，为两个字符串，由若干个空格分隔。每个字符串的长度不超过100。输出描述对于每组输入，输出
  • C#实现AES-CBC加密工具类（含完整源码及使用教程） WangMing_X C#实现各种功能工具集c#AES-CBC加密
    一、AES-CBC加密应用场景AES（AdvancedEncryptionStandard）作为全球公认的安全加密标准，广泛使用在以下场景：API通信加密：保护HTTP接口传输的敏感数据（如身份令牌、支付信息）文件安全存储：加密本地配置文件、数据库连接字符串等用户隐私保护：加密存储密码、身份证号等PII（个人身份信息）跨平台数据交换：与Java/Python等其他语言实现的加密系统互通物联网设备通
  • VSCode安装及配置Go开发环境 weixin_42764969 Tools
    全篇目录---我们不生产知识，我们只做知识的搬运工。1、VSCode的安装下载安装简单使用2、Go开发环境下载安装下载Go安装包配置GOPATH环境变量GOPATH目录介绍3、配置VSCode的Go开发环境3.1、安装Go开发扩展3.2、安装Go开发工具包解决方法一：有梯子就不怕墙高解决方法二：将package下载到本地解决方法三：设置镜像一劳永逸3.3第一个Go程序HelloWorld.本文参考
  • java语言开源协议_Language Server Protocol weixin_39709674 java语言开源协议
    软件简介LSP(LanguageServerProtocol)开源的语言服务器协定。由红帽、微软和Codenvy联合推出，可以让不同的程序编辑器与集成开发环境(IDE)方便嵌入各种程序语言，允许开发人员在最喜爱的工具中使用各种语言来撰写程序。唯一基于JSON的语言服务器数据交换协定，目前由GitHub代管，并采用CC及MIT授权。该协定主要用来促进编辑器及语言服务器之间的互动，允许开发人员在各种编
  • 【蓝桥杯集训·每日一题2025】 AcWing 4905. 面包店 python 查理零世 蓝桥杯2025每日一题蓝桥杯算法python
    AcWing4905.面包店Week43月14日题目描述贝茜开了一家面包店。贝茜的面包店中只有一个烤箱，该烤箱制作一块饼干需要花费的时间为tCt_CtC，制作一块松饼需要花费的时间为tMt_MtM。烤箱每次只能制作一个糕点，也就是说制作AAA块饼干和BBB块松饼需要花费的时间为A×tC+B×tMA\timest_C+B\timest_MA×tC+B×tM。有NNN个客人来光顾贝茜的生意，编号1∼N
  • 微信小程序点餐系统的设计与实现（开题报告+源码+论文）_在线点餐外卖系统设计与实现文献 2301_82243979 程序员微信小程序小程序
    二.技术环境jdk版本：1.8及以上ide工具：Eclipse或者IDEA，微信小程序开发工具数据库:mysql5.7（必须5.7）编程语言:Javajava框架：ssmmaven:3.6.1详细技术：HTML+CSS+JAVA+SSM+MYSQL+VUE+MAVEN+微信开发工具三.功能设计本基于微信小程序的外卖点餐系统的设计与实现有管理员，外卖员，餐厅，用户共四个角色。管理员功能有个人中心，外
  • uniapp(全端兼容) - 最新详细实现可拖动悬浮按钮功能，支持手指拖曳放到页面任意位置，uniapp可拖动的悬浮球，悬浮图标支持拖动效果（详细示例源码及注释，复制粘贴快速植入） 街尾杂货店& 前端组件与功能(开箱即用)uni-app悬浮球uniapp悬浮在屏幕上的组件uniapp悬浮功能uniapp可拖曳拖动的悬浮球
    效果图百度搜的代码都太难用了而且有bug。。。在uniapp小程序/h5网页网站/安卓苹果app/nvue等（全平台完美兼容）开发中，详细实现在uniapp中实现一个可拖动的悬浮按钮，uniapp全平台兼容的悬浮球功能，可挂载各种小卡片、客服等，自由拖动。支持一次全局引入，无需每个页面都引用。你可以直接复制源码，复制到你的项目中，附带全局组件注册的方法（要不每个页面都需要引一次），uniappVu
  • kubernetes-helm详细介绍及使用 冷漠程序员小哥哥 kuberneteskuberneteskuberctldocker
    致读者完整入门示例请参考：Helm完整入门实战Helm本指南介绍了使用Helm来管理Kubernetes集群上的软件包的基础知识。在这之前，假定您已经安装了Helm客户端。如果您仅对运行一些快速命令感兴趣，则不妨从快速入门指南开始。本章包含了Helm命令的详细说明，并解释如何使用Helm。三大概念Chart代表着Helm包。它包含在Kubernetes集群内部运行应用程序，工具或服务所需的所有资源
  • 源自神话的写作要义之英雄之旅 博文视点 生活情感框架体育
    源自神话的写作要义之英雄之旅英雄之旅从本质上说，不论如何变化，英雄的故事总是一段旅程。英雄离开舒适、平淡的地方，到充满挑战的陌生世界去冒险。它可以是外部之旅，去一个明确的地点：迷宫、森林、洞穴、陌生的城市或者国度——这个新的地域会成为英雄和反派及挑战者角力的竞技场。而也有很多故事让英雄去经历一段内心之旅，在头脑、内心、精神领域里展开旅途。在所有精彩的故事中，英雄都会成长和改变，在旅途中改变自己的人
  • 程序化广告行业（11/89）：洗牌期与成熟期的变革及行业生态解析 lilye66 程序化广告kafkaflink时序数据库
    程序化广告行业（11/89）：洗牌期与成熟期的变革及行业生态解析大家好！一直以来，我都在钻研程序化广告行业，在学习过程中积累了不少干货，特别想和大家分享，一起学习进步。这篇文章接着上一篇，深入剖析程序化广告行业在洗牌期和成熟期的发展变化，以及整个行业生态的构成。一、洗牌期的行业变革2017-2018年，程序化广告行业进入洗牌期，这是行业发展过程中自我调整、去伪存真的关键阶段。在前期的燥热发展中，行
  • Mybatis的基本使用 学c真好玩 mybatis
    MyBatis简介MyBatis用于持久层框架,持久层是对数据库操作的部分，前版本iBatis由Apache软件基金组织进行更名并维护。特点:简化数据库的操作SQL映射灵活(半ORM框架)支持高级映射易于集成维护配置动态SQL缓存机制功能：替代JDBC,JDBC是java中提供的用于操作数据库的技术及方案数据库的连接控制难。连接池SQL语句硬编码。将sql语句存放到xml配置文件中参数传递问题。提
  • Python漂浮爱心代码 Want595 趣味编程python开发语言
    目录系列文章前言小海龟漂浮爱心完整代码尾声系列文章序号直达链接表白系列1Python无法拒绝的表白界面（完整代码）_python玫瑰花雨编程-CSDN博客2Python满屏飘字表白代码（完整代码）_抖音同款满屏飘字表白代码(python版)-CSDN博客3Python无限弹窗满屏表白代码（完整代码）_python弹窗满屏幕-CSDN博客4Python李峋同款跳动的爱心（完整代码）_python绘制
  • 2024年Flutter从入门到精通全网最全学习路线指南 高级技术工程师 flutterflutterflutter中文网flutter中文官方文档
    随着移动开发技术的快速发展，Flutter作为Google推出的跨平台开发框架，以其高效的热重载、统一的UI开发体验和卓越的性能表现，正逐渐成为众多开发者青睐的首选工具。为了帮助广大编程爱好者及职业开发者在2024年更好地掌握Flutter技术，本文将为您呈现一套全面且深度的Flutter学习路线图。flutter中文网flutterflutter中文官方文档第一阶段：基础入门与环境配置了解Flu
  • ollama官方安装包 哈拉少12 人工智能
    一、官方安装包基本信息最新版本‌Windows版：v0.6.0.0（国内镜像版，大小999.8M）‌Linux版：v0.6.0（官方版，大小1.59G）‌macOS版：支持通过官网直接下载（版本号与Windows/Linux同步）‌支持平台‌桌面端：Windows（Win7及以上）、Linux（x86_64/ARM64）、macOS‌容器化部署：支持Docker（需配合DockerDesktop）
  • 使用Python的 multiprocessing 模块实现多进程并行计算（上完整代码） 小码小李 开发语言python数据库
    使用Python的multiprocessing模块实现多进程并行计算的较为详细复杂的示例代码，用于计算一个较大范围内数字的平方，并将结果汇总。以下是一个更具体、复杂且详尽的多进程并行计算代码示例，用于分析多个大型文本文件中单词出现的频率：importmultiprocessingimporttimeimportrefromcollectionsimportCounter#函数用于读取单个文件内容
  • YOLOv12模型详解及代码复现 清风AI 深度学习算法详解及代码复现计算机视觉YOLO人工智能机器学习神经网络python算法
    算法背景在计算机视觉领域不断发展壮大的背景下，YOLOv12算法应运而生。这一突破性成果源自JosephRedmon和AliFarhadi等研究人员在华盛顿大学的开创性工作。他们的目标是解决实时物体检测这一关键问题，在速度和精度之间寻求最佳平衡。YOLOv12延续了前作YOLOv1的成功理念，将其定位为一种回归问题，而非传统的区域提议+分类方法。这种创新方法不仅简化了整个检测过程，还显著提高了处理
  • 【零基础JavaScript入门 | Day1】从“消费记账“案例学编程基础 ⭐表格制作+数据类型转换全解析 helbyYoung JavaScrip学习javascript学习
    【零基础JavaScript入门|Day1】从"消费记账"案例学编程基础⭐表格制作+数据类型转换全解析今日学习重点：✅数据与现实的映射关系→网页表格如何承载生活数据✅变量容器的本质→用let管理三大消费支出✅隐式类型转换技巧→+prompt()输入处理的妙用✅模板字符串实战→动态生成消费报表案例亮点：1️⃣用户交互三部曲：通过prompt()实现饮食/交通/娱乐费用的分步输入2️⃣自动统计系统：t
  • C++：std::vector常用函数及用法详解 湫兮之风 c++c++算法开发语言
    std::vector是C++标准库中最常用的动态数组容器，提供了丰富的操作方法，支持动态扩展、插入、删除等操作。本文将详细介绍vector的常用函数及其用法，并配合代码示例说明。1.std::vector的基本使用在C++中，vector需要包含头文件：#include示例：#include#includeintmain(){std::vectorvec={1,2,3,4,5};for(intn
  • Android - ViewPager 从基础到进阶 whd_Alive Android基础AndroidViewPager
    前言好记性不如烂笔头，学习的知识总要记录下来，通过本文来加深对ViewPager方方面面的理解：ViewPager的基础介绍PagerAdapter+FragmentPagerAdapter&FragmentStatePagerAdapter与Fragment+TabLayout的联动使用Banner轮播图自定义切换动画首次登录引导界面闲话少说，下面进入正题。基础介绍ViewPager是Andro
  • A800架构设计与实战 智能计算研究中心 其他
    内容概要《A800架构设计与实战》围绕新一代计算架构的技术演进与工程落地展开系统性论述。全书以分布式运算优化原理为切入点，通过对核心模块的层级化拆解，深入剖析多节点协同计算中的资源分配、任务调度及通信瓶颈突破方法。为强化理论与实践的结合，书中引入智能制造与云渲染两大典型场景的完整案例，覆盖从需求分析、架构设计到性能调优的全生命周期。技术维度实现路径应用价值架构设计核心模块拆分与重组降低系统耦合度分
  • 行业洞察：未来趋势与发展机遇分析 智能计算研究中心 其他
    内容概要在当今竞争激烈的商业环境中，行业洞察显得尤为重要。企业与投资者需不断关注行业动态，分析和把握市场趋势以获得先机。未来的市场将受到技术进步、消费者需求变化及政策调整等多个因素的影响，因此，深入洞察这些变化有助于在复杂的环境中避免风险并抓住机遇。通过掌握行业趋势，决策者可以更有效地制定战略，有针对性地应对市场挑战。本文将综合现有数据及案例，深入探讨包括科技、金融、制造等关键行业的发展动向，识别
  • MySQL主从复制架构原理及部署（work） 只想按时下班 Mysqlmysql数据库memcached
    文章目录一、原理1、什么是MySQL主从复制2、MySQL主从复制应用场景3、MySQL主从复制架构及原理4、MySQLbinlog日志三种模式二、主从复制配置搭建1、MySQL8二进制安装2、主从复制配置3、测试主从复制三、二进制日志管理说明四、MySQL主从复制常见问题1、从库binlog落后主库binlog？2、主库update，从库迟迟没有更新3、主从复制延时配置（从库配置）4、主从复制故
  • Linux创建git仓库，并利用post-receive钩子实现自动部署 wpfly2020 linuxgit
    一、创建git仓库的用户groupaddgit#出于安全考虑，创建的git用户不能允许SSH登录，只能在git-shell下使用useraddgit-ggit-s/usr/local/git/bin/git-shellpasswdgit二、创建仓库及设置mkdir-p/repo/app1.gitcd/repo/app1.gitgitinit--bare--shared=0770chown-Rgit
  • 1章5节：大模型术语解读与从生成到推理的演进 DAT｜R科学与人工智能 人工智能
    在人工智能的浩瀚宇宙中，大模型正以前所未有的速度演进，推动着科技变革的新浪潮。从多模态到通用模型，再到行业模型，人工智能的边界不断拓展，为各行各业带来了全新的机遇与挑战。本篇文章将深入剖析大模型相关的核心术语，探讨其内涵、应用及发展趋势，并回顾大模型从生成到推理的演进历程，解析全球科技巨头与国内前沿企业在这一领域的竞争与创新。让我们一同探索大模型的演进脉络，把握智能时代的发展脉搏。一、剖析大模型相
  • 微信小程序脚本自动化测试方案 测试工程师成长之路 测试工程师成长之路微信小程序UI自动化测试小程序自动化
    这篇文章主要讲述了微信小程序脚本自动化测试方案，包括方案产生的初衷，选型Minium的原因，分阶段目标，架构设计（底层服务层、页面功能Case、流程测试），数据Mock方式及流程，最后提到结合工具提升效率，实现配置化测试等。一段痛苦的日子从开始负责小程序开始，基本每两周发一次版本，并且是在10点半后开始发版。经常遇到的场景是等到10点，以为测试的差不多了，没有什么问题。啪啪，打脸来的太快，总会发现
  • 深入探究 Ryu REST API 漫谈网络 网络技术进阶通途网络
    Ryu4.34RESTAPI详细接口说明与示例Ryu4.34的RESTAPI提供了对SDN网络的核心管理功能，涵盖交换机、流表、端口、拓扑和QoS等操作。以下是详细的接口分类、功能说明及Python示例代码。1.交换机管理1.1获取所有交换机DPID端点:GET/stats/switches功能:返回当前连接到控制器的所有交换机的DPID（数据路径标识符）列表。示例:importrequestsR
  • 参数化曲线——参数三次样条曲线（实例） Alpha狼霸 线性代数矩阵机器学习算法机器人数学建模数据分析
    问题及相关理论给定空间中n+1个数据点pi(i=0,1,...,n)\bm{p}_i(i=0,1,...,n)pi(i=0,1,...,n)，如何构造一条通过这些数据点并满足二阶连续的三次样条曲线？参数化曲线——参数三次样条曲线（1）介绍了数据点的参数化方法。参数化曲线——参数三次样条曲线（2）介绍了埃尔米特基形式的三次多项式曲线及其域变换。参数化曲线——参数三次样条曲线（3）推导了满足二阶连续的
  • 前端笔试高频算法题及JavaScript实现 GISer_Jinger 前端算法javascript
    以下是前端笔试常见的编程算法题及JavaScript代码现，结合最新面试题整理：一、数组/字符串处理两数之和找出数组中两数之和等于目标值的索引consttwoSum=(nums,target)=>{constmap=newMap();for(leti=0;i{letmap=newMap(),max=0,left=0;for(letright=0;right[...newSet(arr.flat(I
  • Spring4.1新特性——Spring MVC增强 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • mysql 性能查询优化 annan211 javasql优化mysql应用服务器
    1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了 检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方 花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操
  • windows系统配置 cherishLC windows
    删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns
  • 人体的排毒时间 Array_06 工作
    ======================== ||  人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR
  • ZooKeeper cugfy zookeeper
    Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea
  • 网络爬虫的乱码处理 随意而生 爬虫网络
    下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。     网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理
  • Xcode常用快捷键 张亚雄 xcode
    一、总结的常用命令：     隐藏xcode command+h     退出xcode command+q     关闭窗口 command+w     关闭所有窗口 command+option+w     关闭当前
  • mongoDB索引操作 adminjun mongodb索引
    一、索引基础：    MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：    > db.test.ensureIndex({"username":1})    可以通过下面的名称查看索引是否已经成功建立： &nbs
  • 成都软件园实习那些话 aijuans 成都 软件园 实习
    无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都
  • Linux下FTP服务器安装及配置 ayaoxinchao linuxFTP服务器vsftp
    检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed  安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息   安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf
  • 使用mongo-java-driver获取文档id和查找文档 BigBird2012 driver
    注：本文所有代码都使用的mongo-java-driver实现。   在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在
  • JSONObject以及json串 bijian1013 jsonJSONObject
    一.JAR包简介     要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：     1.commons-lang-2.0.jar     2.commons-beanutils-1.7.0.jar     3.commons-collections-3.1.jar &n
  • [Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性 bit1129 zookeeper
    为了说明问题，看个简单的代码，   import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal
  • 【Scala十二】Scala核心六：Trait bit1129 scala
    Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c
  • weblogic version 10.3破解 ronin47 weblogic
    版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa
  • 求第n个斐波那契数 BrokenDreams
            今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。         自己试了下，搞了好久。。。基础要加强了。           &nbs
  • 读《研磨设计模式》-代码笔记-访问者模式-Visitor bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret
  • MatConvNet的excise 3改为网络配置文件形式 cherishLC matlab
    MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http
  • ZK Timeout再讨论 chenchao051 zookeepertimeouthbase
    http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003
  • CASE WHEN 用法介绍 daizj sqlgroup bycase when
    CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数  CASE sex  WHEN '1' THEN '男'  WHEN '2' THEN '女'  ELSE '其他' END  --Case搜索函数  CASE WHEN sex = '1' THEN
  • PHP技巧汇总:提高PHP性能的53个技巧 dcj3sjt126com PHP
    PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍
  • Yii框架中CGridView的使用方法以及详细示例 dcj3sjt126com yii
    CGridView显示一个数据项的列表中的一个表。 表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 实例代码如下：
  • Maven项目打包成可执行Jar文件 dyy_gusi assembly
    Maven项目打包成可执行Jar文件 在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin>
  • php常见错误 geeksun PHP
    1.  kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc
  • 修改linux的用户名 hongtoushizi linuxchange password
    Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s   具体的操作顺
  • 第五章 常用Lua开发库1-redis、mysql、http客户端 jinnianshilongnian nginxlua
    对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。   Redis客户端 lua-resty-r
  • zkClient 监控机制实现 liyonghui160com zkClient 监控机制实现
             直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举
  • 在Mysql 众多表中查找一个表名或者字段名的 SQL 语句 pda158 mysql
    在Mysql 众多表中查找一个表名或者字段名的 SQL 语句： 　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum
  • 程序员对英语的依赖 Smile.zeng 英语程序猿
    1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年
  • Oracle学习笔记(8) 使用PLSQL编写触发器 vipbooks oraclesql编程活动Access
        时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！     这是第八章的学习笔记，学习完第七章的子程序和包之后
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他