1. js轮播图菜鸟教程
找到js脚本里的animate方法
$(selector).animate(styles,speed,easing,callback)
其中参数speed就是轮播速度 毫秒 （比如 1500）
2. js轮播图实现
先给它定位 用jqurey 一个animate({width:0;height:0;},1000) 就行了 思路是这样的 不明白的问我
3. 移动端轮播图插件
我最近的项目经常用到轮播图，之前都是自己写的，但我是个新手，虽然效果能写出来，但是感觉代码写的不是太好，不如人家写的插件，重用率高，而且用起来还很方便，但是如果插件太大了就不太好了，还不如自己写。当然如果找不到合适的插件那还得自己写。 所以总结一下就是如果有合适的好的就用人家的，没有的话就只能自己写喽！样式一般都是自己写，只是套用人家的方法而已。
4. js轮播图制作
下面是使用html+css+js(javascript)来完成轮播图功能的简单例子，有兴趣的可以看一下。
1首先创建一个html文件，下图中我创建的是html5的，所以看起来很简单。
2然后在html的主体部分添加一个div标签，然后在该标签下添加一个img标签，并设置img的宽高。
3然后我们可以在html头部标题下添加css样式代码来控制div的显示效果。
4接下来在body标签中添加js的事件onload，也就是加载该页面的时候，调用onload的值对应的方法，图中的话就是init()。再为img添加一个id属性，这样我们可以通过getElementById("id值")来得到该元素标签。
5然后通过<script>标签中，添加如下图代码，完成轮播的功能。其中setInterval(code,time);//两个参数都是必须的，其中code是执行的方法或者代码串，time是时间间隔（以毫秒计，1000就是1秒，根据需要来调整）。其中if语句中i的值跟图片的数量和命名有关。
5. js轮播图视频教程
可以通过输入代码来操作。
这里的图片轮播方法是我从网上参考的方法，只是自己做了一些改进，先来贴一发代码：
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css">
<script type="text/javascript" src="./js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./js/test2.js"></script>
</head>
<body>
<div id="layout">
<header >
<div id="banner">
<ul id="banner_img">
<li><img src="./img/s1.jpg"></li>
<li><img src="./img/s2.jpg"></li>
<li><img src="./img/s3.jpg"></li>
</ul>
</div>
</header>
</div>
</body>
</html>
在这个html的目录下有三个同级的文件夹，img中放图片，css和js分别存放这个网页的css文件和js文件，这里用到了jquery，记得引入顺序，jquery一定要放在其他js前面。html代码很简单，不做过多解释。
看一下引入的css，init2.css
*{
margin: 0px ;
padding: 0px ;
}
#layout{
width: 960px ;
margin: 0 auto ;
}
#banner{
position: relative;
overflow: hidden;
width: 600px;
height: 200px;
border-radius: 10px ;
border: 2px solid black;
}
#banner_img li{
float: left;
list-style-type: none;
}
#index{
position: absolute;
right: 8px ;
bottom: 8px ;
}
#index li{
float: left;
width: 16px ;
height: 16px ;
text-align: center;
line-height: 16px ;
border-radius: 5px ;
border:1px solid #FF7300 ;
background: white;
list-style: none;
margin-left: 8px ;
cursor: pointer;
}
.clearfix:after{
content: "" ;
height: 0px ;
display: block;
clear:both ;
}
.on
{
background:#FF7300 ;
}
css基本上和前面的html中的类对应，claerfix来清除浮动，on是代表轮播图片的索引中当前的正播放的图片的索引，其实就改个背景，这里的索引是后面动态加上去的，索引在html中看不到。主要思路就是把装图片的容器设置成overfl;hidden;下面是一种比较简单的实现，利用jquery的fadeIn和fadeOut效果来实现。
//fadeIn and fadeOut
var time ;
var index = 1 ;
var tolnum = 3 ;
$(function(){
<span > </span>setInterval("showBanner("+tolnum+")",3000);
});
function showBanner(n)
{
<span > </span>var ul = $("#banner_img") ;
<span > </span>ul.children().fadeOut("slow") ;
<span > </span>ul.children().eq(index).fadeIn("slow") ;
<span > </span>index = index+1>n-1 ? 0 : index+1 ;
}
恩，不知道为什么到最后一张图片的时候会产生没有淡出的bug，不太懂，请大家指教。第二种方法是利用jquery的animation来实现margin属性的过渡。
init();
function init()
{
$(function(){
var index = 0 ;
var adTime ;
var len = $("#banner_img li").length ;
addIndex(len) ;
var bannerLi = $("#index li");
//handle index
$("#index li").mouseover(function() {
index = $("#index li").index(this) ;
showImgs(index) ;
});
//toggleInterval
$("#banner").hover(function(){
clearInterval(adTimer);
},function(){
adTimer=setInterval(function(){
//alert(index) ;
showImgs(index);
index++;
if(index==len){
index=0;
}
},2000)
}).trigger('mouseleave');
});
}
//auto add index
function addIndex(n)
{
var ul = $("<ul id=\"index\"></ul>") ;
for(var i=1;i<=n;i++)
{
var li = $("<li></li>") ;
li.append(function(num){
return num
}(i)) ;
ul.append(li) ;
}
ul.children().first().addClass('on') ;
$("#banner_img").append(ul);
}
function showImgs(index)
{
var adwidth=$("#banner_img>li:first").width();
$("#banner_img").stop(true, false) ;
//$("#banner_img").css('margin-left', -index*adwidth+"px");
$("#banner_img").animate({
"marginLeft":-adwidth*index+"px"
},1000);
$("#index li").removeClass('on').eq(index).addClass('on') ;
}
hover（）是一种代替mouseenter和mouseleave的方法，听说比较好用。trigger（）来触发当前对象的一个状态，这里要先触发一次mouseleave的状态来初始化计时器，因为这里的设定是当鼠标移到$("#banner")上就销毁定时器，锁定当前图片，移开鼠标就重新添加定时器。<pre name="code" > $("#banner_img").animate({
"marginLeft":-adwidth*index+"px"
},1000);
这了就是对jquery中animation方法的使用，通过传进来的index来改变banner_img的margin，这里是margin-left，所以图片就会从右往左刷（需要设置浮动），如果需要从下往上刷就设置margin-top就好了，还有我发现js中动态添加margin是不能触发css的transition的。
6. 移动端轮播图插件推荐
1、先在微信公众平台（新版）后台插件库添加“页面模板”插件。
2、在功能里选择“页面模板”-并“添加模板”，选择第二种模板就行。
3、选择相应图文素材，最后分享链接就行了。
7. JS 轮播图
一、高级基础部分
1.ES6/ES7语法和原理实现
2.异步发展过程：callback、promise、generator、co、async/await等异步流程控制(async和await的实现原理)
3.promise设计模式原理及在es6中的应用，手写一个符合promise A+规范的promise实现
4.Node基础与实战
5.Node事件原理和发布定阅设计模式
6.函数式编程
二、模块化的演进
JavaScript模块化发展的演进历史 CommonJS、AMD、CMD、ES6模块的演进历史
目前最主流的模块化实现方案: CommonJS 到 ES Module
手写 CommonJS 的简单实现
三、前端工程化构建工具
1.gulp的基本用法以及实现原理
2.常用插件(压缩、合并、编译、预览服务、自动注入)
3.node.js中自定义流的高级用法
4.实现自定义插件(auto-prefixer)
5.webpack基本用法以及运行原理
6.常见的loader以及plugin(DllPlugin等)
7.Webpack工作原理分析
8.编写自定义Loader、编写自定义Plugin
9.webpack优化(resolve、模块热替换、压缩、代码分割、可视化工具)
四.React全家桶
1.react
1.为什么采用组件化的方式
2.react环境搭建
3.JSX语法的使用(createElement,render的原理实现)
4.JSX表达式的用法
5.JSX的属性(className,htmlFor,style,dangerouslyInnerHTML)
6.组件使用(类声明,函数声明)
7.组件的属性和状态(属性的检验以及setState详解)
8.复合组件
9.组件的声明周期
10.受控组件 非受控组件
11.children属性的使用
12.项目实战留言板
2.redux
1.手写redux库(getState,createStore,dispatch,subscribe,applyMiddlewar
e,combineReducer,compose,bindActionCreators)
3.react&redux
1.高阶组件的原理和使用
2.react高级属性context上下文
3.react-redux实现todoList
4.手写react-redux(Provider和connect原理解析)
4.中间件
1.react
● 1.为什么采用组件化的方式
● 2.react环境搭建
● 3.JSX语法的使用(createElement,render的原理实现)
● 4.JSX表达式的用法
● 5.JSX的属性(className,htmlFor,style,dangerouslyInnerHTML)
● 6.组件使用(类声明,函数声明)
● 7.组件的属性和状态(属性的检验以及setState详解)
● 8.复合组件
● 9.组件的声明周期
● 10.受控组件 非受控组件
● 11.children属性的使用
● 12.项目实战留言板
2.redux
● 1.手写redux库(getState,createStore,dispatch,subscribe,applyMiddlewar e,combineReducer,compose,bindActionCreators)
3.reactredux
● 1.高阶组件的原理和使用
● 2.react高级属性context上下文
● 3.react-redux实现todoList
● 4.手写react-redux(Provider和connect原理解析)
4.中间件
● 1.手写applyMiddle和compose(中间件原理)
● 2.手写redux-logger,redux-thunk,redux-promise
● 3.手写自定义本地缓存中间件
5.reactrouterdom
● 1.HashRouter,BrowserRouter的区别
● 2.Link,NavLink的使用(extact绝对匹配,state带参数跳转)
● 3.Route组件三种渲染方式(component,render,children)
● 4.路由参数以及子路由的使用(params)
● 5.withRouter,PrivateRouter的用法
● 6.Prompt组件阻止跳转
● 7.重定向(Redirect组件)
● 8.手写HashRouter Route等常用组件
6.ReactTransitiongroup
● 1.react动画的实现原理
● 2.使用React-Transition-group库开发todo动画应用
7.项目实战React珠峰课堂1.0
● 1.webpack环境搭建
● 2.底部页签导航
● 3.动画
● 4.redux改变课程分类
● 5.实现头部轮播图
● 6.课程列表列表
● 7.下拉刷新
● 8.上拉加载
● 9.记录滚动条位置
● 10.课程详情页面
● 11.用户注册
● 12.用户登录
● 13.受保护的我的课程页面
● 14.Redux开发插件
8.源码级Vue+React深度解析与实现
● 1.手写Vue双向绑定实现
● 2.Vue虚拟DOM和React虚拟DOM的区别
● 3.如何实现一个 Virtual DOM 算法
● 4.通过源码彻底搞明白setState的更新机制
● 5.手写包含虚拟DOM、事件监听、基本组件生命周期等功能的React库
五.node高级
1.http深入和tcp详解
● 1.七层网络协议分析
● 2.TCP连接和Nagle算法
● 3.使用wireshark学习七层网络协议
● 4.DNS服务器详解
● 5.Node静态服务器实现与缓存机制的实现
● 6.HTTP常用报文的实际应用
● 7.Node Stream的应用与文件分片上传策略
● 8.RestfulAPI设计和使用
● 9.CDN和OSS的使用
● 10.HTTPS安全通信过程分析
2.Express
● 1.手写express框架
● 2.中间件的实现原理、bodyParser、cookie-parser、static、模板原理
3.Koa
● 1.手写Koa框架
● 2.中间件的实现原理、bodyParser、cookie-parser、static、模板原理
4.Linux
● 1.Linux介绍
● 2.Linux文件和目录
● 3.Linux用户和组权限
● 4.Linux命令
● 5.Shell脚本
5.Mongodb
● 1.Mongodb安装和使用
● 2.Mongodb的系统架构
● 3.Mongodb高级查询
● 4.Mongodb索引
● 5.Mongodb安全与权限
● 6.mongoose模块之Schema
● 7.mongoose模块之Model
● 8.使用Model对文档进行增删改查
6.珠峰博客(express+mongodb+mongodb)
● 基于bootstrap+express+mongodb实现一个包括用户管理、文章管理、多看留言、分页查询、 搜索、文件上传、pv留言统计等功能完整的博客系统。使用了express的路由、ejs模板和serve-favicon、 morgan、cookie-parser、body-parser、express-session、connect-mongo、connect-flash、uuid、 async等内置各种中间件以及其它发路径保护等自定义中间件，并扩展了富文本编辑器、markdown和heroku云布署等功能。
● 1.项目初始化
● 2.用户管理
● 3.文章管理
● 4.分页查询
● 5.搜索
● 6.文件上传
● 7.PV留言统计
7.珠峰聊天室项目实战(react+socket.io+mongodb)
● 1.什么是实时通信
● 2.什么是Websocket
● 3.websocket和http的对比
● 4.使用socket.io实现聊天室
● 5.匿名聊天
● 6.有用户名的聊天和用户列表
● 7.用户私聊
● 8.划分不同的聊天房间
● 9.消息持久化
● 10.支持QQ表情
8.MySQL
● 1.MYSQL安装与使用
● 2.MYSQL系统架构
● 3.数据处理之增删改查
● 4.数据类型和约束分页
● 5.索引和慢查询性能分析
● 6.数据库安全之防止SQL注入
9.珠峰爬虫(cheerio+request+mysql)
● 1.发出HTTP请求获取指定URL中的内容
● 2.使用cheerio的语法操作网页元素，提取需要的元素
● 3.将数据保存到mysql数据库中
● 4.建立web服务器显示这些数据
● 5.使用计划任务自动执行更新任务
● 6.布署项目到阿里云中并配置反向代理
10.Redis
● 1.Redis安装和使用
● 2.5种数据结构及使用场景
● 3.API的理解和使用
● 4.Redis客户端
11.Nginx
● 1.nginx的安装和使用
● 2.模块和基本配置
● 3.正向反向代理等应用场景
12.Docker
● 1.Docker介绍和安装
● 2.Dockerfile
● 3.存储和镜像仓库
● 4.Dock实战
13.单元测试
● 1.测试用例和需求分析
● 2.单元测试框架mocha/ava
● 3.自动化测试之selenium
14.集群和负载均衡
● 1.cluster的工作原理和负载均衡算法
● 2.pm2工具
15.前端性能监控与性能优化、行为监控与安全防范
● 1.针对重绘重排的优化策略
● 2.如何发现性能短板与各个短板的优化
● 3.前端埋点上报
● 4.前端错误上报
● 5.前端性能上报
● 6.前端行为监控上报
● 7.前端恢复上线与A/B测试
● 8.网络缓存技术分析
● 9.浏览器渲染过程分析(DOM树、RenderObject、绘图上下文)
16.项目部署
● 1.npm script工作流
● 2.shell脚本布署
17.安全
● 1.XSS的原理与代码实战
● 2.CSRF的原理与代码实战
18.功能测试与性能测试
● 1.测试用例和需求分析
● 2.常用功能测试框架基础使用(mocha/ava)
● 3.常用性能测试框架基础使用(Benchmark)
19.全链路优化
● 1.DNS优化
● 2.请求速度优化
● 3.渲染优化之 JS css image html
● 4.缓存优化
● 5.服务器优化
● 6.数据库优化
六、前端设计模式(选讲)
创建型设计模式
● 1.工厂模式
● 2.建造者模式
● 3.原型模式
● 4.单例模式
结构型设计模式
● 1.外观模式
● 2.适配器模式
● 3.代理模式
● 4.装饰者模式
● 5.组合模式
行为型设计模式
● 1.观察者模式
● 2.状态模式
● 3.策略模式
● 4.命令模式
● 5.访问者模式
● 6.中介者模式
● 5.迭代器模式
七、算法&数据结构(选讲)
1.时间复杂度
2.空间复杂度
3.常见排序算法
● 1.冒泡排序、优化
● 2.选择排序
● 3.插入排序
● 4.归并排序
● 5.快速排序式
● 6.计数排序
● 7.桶排序
● 8.基数排序
4.链表(链表反转、链表是否有环)
5.树(高度、前序、中序、后序、广度优先算法、反转)
6.二叉树搜索算法
7.青蛙跳台阶问题-动态规划算法
8.React虚拟DOM Diff算法实现
![]("005.jpg)