html
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container">
<div class="list" id="list" style="left:-600px">
<img src="images/05.png" alt="">
<img src="images/01.png" alt="">
<img src="images/02.png" alt="">
<img src="images/03.png" alt="">
<img src="images/04.png" alt="">
<img src="images/05.png" alt="">
<img src="images/01.png" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
var container = document.getElementById("container");
var list = document.getElementById("list");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var btns = document.getElementById("btns").children;
// 记录焦点变化的位置
var index = 0;
var timer;
var animated = false;
// 1.点击next,left加-600,当left<-3000时,left值等于-600
next.onclick = function () {
if(animated){
return false;
}
index++;
if (index > 4) {
index = 0;
}
showBtn();
animate(-600)
}
prev.onclick = function () {
if(animated){
return false;
}
index--;
if (index < 0) {
index = 4
}
showBtn();
animate(600)
}
// 点击焦点换图
for (let i = 0; i < btns.length; i++) {
btns[i].index = i;
btns[i].onclick = function () {
var offset = (this.index - index) * -600;
// index记录焦点变化的位置
index = this.index;
animate(offset);
showBtn();
}
}
function showBtn() {
for (let i = 0; i < btns.length; i++) {
btns[i].classList.remove("current");
}
btns[index].classList.add("current");
}
function animate(offset) {
animated = true;
let time = 300;
let interval = 10;
let speed = offset / (time / interval);
let newLeft = parseInt(list.style.left) + offset;
function go() {
let leftValue = parseInt(list.style.left);
if ((speed < 0 && leftValue > newLeft) || (speed > 0 && leftValue < newLeft)) {
list.style.left = leftValue + speed + "px"
setTimeout(go, interval)
} else {
animated = false;
if (newLeft > -600) {
list.style.left = -3000 + "px"
} else if (newLeft < -3000) {
list.style.left = -600 + "px";
} else {
list.style.left = newLeft + "px";
}
}
}
go();
}
</script>
</body>
</html>
~~~
css
~~~
*{margin:0;padding:0}
.container{
margin-left: auto;
margin-right: auto;
width:600px;height:400px;
border:1px solid #333;position: relative;
overflow: hidden;
}
.list{
position: absolute;
width:4200px;
height:400px;
}
.list img{
float: left;
}
#prev,#next{
cursor: pointer;
background: url("../images//icon-slides.png");
width:40px;height:69px;position: absolute;
z-index: 100;border: none;
top:50%;transform: translateY(-50%);
}
#next{
right:0;
background-position-x:-43px;
}
#btns{
left:50%;transform: translateX(-50%);
bottom: 20px;
position: absolute;z-index:101;
}
#btns span{
cursor: pointer;
display: inline-block;
width:25px;height:25px;
background: rgba(51, 51, 51, 0.493);
border-radius: 50%;
}
#btns .current{
background:#ff8936
}
~~~
- JavaScript介绍
- js基本语法
- 调试方法
- 标识符
- 数据类型(基本，引用）
- 基本数据类型
- 引用数据类型
- 严格模式.
- 全局变量和局部变量
- DOM 节点
- DOM 改变元素内容（样式 内容）
- 节点改变元素内容（通过父子节点找到元素然后操作）
- 添加元素
- 设置 移除 属性
- DOM下的事件
- 知识点整理
- 异步
- Ajax
- this指向问题
- 设备类型检测（手机 平板 电脑）
- 函数
- 函数的参数
- 重载
- 数据类型
- 构造函数
- 返回上一个网页
- 数组 （重点）
- 增加数组内容
- 删除数组元素
- 复制数组
- 修改数组元素（功能强大实现 增 删 改）
- 数组元素查询
- 数组遍历
- 最值
- 展开语法
- join
- 排序问题
- 求和
- 颠倒数组
- 判断是不是一个数组
- 二维数组
- 数组和字符串之间转换
- 数组去重
- 将jquery对象转为javascript对象
- 元素偏移量
- 获取一个元素距离顶部的距离
- 可视区域宽高
- 布局视口 （移动设备）
- 文档碎片
- 表格中的 thead tbody
- 获取元素宽度
- 滚动区域宽高
- div滚动条设置
- 使用 offsetWidth 设置父元素宽度和子元素宽度之和一样
- 字符串的方法
- js功能实现
- 点击显示 隐藏
- 点击变色 兄弟元素隐藏.
- 点击显示隐藏区域.
- 兼容性问题.
- 选择按钮,
- 获取外部样式
- 点击弹出下标
- 通过属性改变img 的src
- 小米登录 es6实现js
- try catch
- 小米登录es5实现js
- js实现导航栏点击加载多个页面
- js实现网页之间的跳转和在指定div加载页面
- iframe 高度实现自适应
- js 获取滚动条距离顶端的距离
- jQuery animate() 方法 动画效果
- fade（js实现遮罩层渐变色）
- js轮播实现
- 超哥轮播js
- 轮播动画原理
- 数组实现瀑布流
- 电子表计时器date
- 从豆瓣接口上取数据实现搜索功能（重点！！！！）
- 封装
- 不使用js-ajax 使用VueResource实现数据请求
- 需要常看的知识点
- 移动端响应布局rem
- rem+vw
- 原型
- JS的模块化如何解决
- ES5和ES6模块化写法
- js内置对象
- 结构赋值es6
- 字符串模板 分割字符串
- 谈基本数据类型中的方法（本不带有方法）
- Math
- date
- 正则
- 备选字符集
- 连号的备选字符集
- replace() 查找替换（过滤）
- 量词
- 不确定的数量
- search找下标
- test()检验是否包含正则表达式
- 实例
- 验证电话号码
- 邮箱验证
- 将指定内容过滤（天猫 淘宝）
- 预定义字符集（简化）
- 严格匹配 ^ $
- Ajax
- http get post
- $.get()和$.post()详解
- jquery-ajax 数据请求
- 使用Vue Ajax在网页中渲染数据
- axios向服务器端get，post数据（重点）
- 跨域
- 原生Ajax
- 原理步骤 json解析字符串
- 多态
- js中的面向对象
- js中的类和继承
- 原型和原型链
- 参数表达式
- 字符串中常用的方法
- mock.js
- scrollReveal 滚动显示
- Node.js模块里exports与module.exports的区别