## html的布局
```
<!--轮播层-->
<div class="slide_once">
<ul id="slideBanner">
<li>
<img src="./img/slide1.jpg" alt="">
</li>
<li>
<img src="./img/slide2.jpg" alt="">
</li>
<li>
<img src="./img/slide3.jpg" alt="">
</li>
</ul>
<div class="controller clearfix" id="topSlide">
<!--<span class="current"></span>-->
<!--<span></span>-->
<!--<span></span>-->
</div>
</div>
```
## 样式
```
.slide_once .controller {
position: absolute;
height:40px ;
left: 50%;
transform: translateX(-50%);
bottom:90px;
}
.slide_once .controller span {
box-sizing: border-box;
margin-top: 10px;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #fff9e5;
margin-left: 20px;
margin-right: 20px;
float: left;
}
.slide_once .controller .current {
width: 36px;
height: 36px;
background: url("../img/video.png");
margin-top: 0;
}
.more .slide_con ul {
width: 600%;
position: absolute;
left: 0;
top: 0;
}
.more .slide_con li {
float: left;
height: 100%;
width: 1200px;
}
.slide .slide_once {
width: 100%;
height: 100%;
overflow: hidden;
}
.slide_once li img {
width: 100%;
height: 960px;
}
```
## js
```
/* *
* desc: 轮播图
* time: 2018-12-1
* author: Marvin
* @param{Object} 配置参数 参数说明
* @param{ulId}: ul的id
* @param{controlId}: 控制器span盒子的id
* @param{epeed}: 轮播图的速度
* @param{width}: 轮播图片的宽度
* @param{height} ： 轮播图的高度
* @param{currentClassname} ： 当前轮播的class
* @param{currentspecial} ： 当前特殊轮播的class
*/
function Slide(option) {
this.parent = document.querySelector(option.ulId) || null;
this.control = document.querySelector(option.controlId) || null;
this.index = 0;
this.square = 0;
this._init(option);
}
Slide.prototype = {
_init: function (option) {
/*所有的轮播的盒子*/
this.listArray = this.parent.children;
/*所有轮播盒子的个数*/
this.listLength = this.listArray.length;
/*复制第一张的图片到ul 的最后*/
this.parent.appendChild(this.parent.children[0].cloneNode(true));
/*轮播图片的宽度以及高度*/
this.liHeight = option.height;
this.liWidth = option.width;
this.speed = option.speed;
this.currentClassname = option.currentClassname;
this.currentspecial = option.currentspecial || option.currentClassname;
},
reset:function () {
var that = this;
this.index = 0;
this.square = 0;
clearInterval(that.timer)
},
beforePlay: function () {
var that = this;
var str = ''
/*初始化样式*/
this.setStyle(that.parent, {'width': Number(that.listLength+1) * parseInt(that.liWidth) + 'px'});
for (var i = 0; i < that.listArray.length; i++) {
that.setStyle(that.listArray[i], {'width': that.liWidth, 'height': that.liHeight});
}
for (var i = 0; i < that.listArray.length-1; i++) {
str += '<span></span>'
}
/*绑定span的内容*/
that.control.innerHTML = str;
/*初始化span的样式*/
that.addClassMany(that.control.children[0],[that.currentClassname]);
},
play: function () {
var that = this;
var len = this.control.children
for(var i = 0; i < len.length; i ++) {
len[i].index = i; // 获得当前第几个小li 的索引号
len[i].onclick = function() {
// console.log(this.index)
// console.log(that.square)
for(var j=0;j<len.length;j++)
{
len[j].className = ""; // 所有的都要清空
}
this.className = that.currentClassname;
that.animateM(that.parent,-this.index* parseInt(that.liWidth))
that.index = that.square = this.index
}
}
that.index ++;
if(that.index > (that.listLength)) {
that.parent.style.left = 0
that.index = 1;
}
that.animateM(that.parent,-that.index* parseInt(that.liWidth));
that.square++;
if(that.square > that.listLength -1)
{
that.square = 0;
}
for(var i=0;i<that.control.children.length;i++) // 先清除所有的
{
that.control.children[i].className = ""
}
/*给当前的控制器span添加class*/
that.addClassMany(that.control.children[that.square], [that.currentClassname])
},
autoPlay:function () {
var that = this;
clearInterval(timer)
var timer = null;
that.beforePlay();
timer = setInterval(function () {
that.play()
},that.speed)
},
animateM: function (obj, target) {
clearInterval(obj.timer);
obj.timer = setInterval(function () {
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
obj.style.left = obj.offsetLeft + step + "px";
if (obj.offsetLeft == target) {
clearInterval(obj.timer);
}
}, 10)
},
/*获取属性函数*/
getStyle: function (obj, attr) { // 谁的 那个属性
obj.currentStyle = '';
if (obj.currentStyle) // ie 等
{
return obj.currentStyle[attr]; // 返回传递过来的某个属性
}
else {
return window.getComputedStyle(obj, null)[attr]; // w3c 浏览器
}
},
/*设置属性*/
/*des:josn的key和value必须是字符串*/
setStyle: function (dom, josn) {
for (var key in josn) {
var styleK = key;
var styleV = josn[key];
if (dom.length) {
for (var i = 0, len = dom.length; i < len; i++) {
dom[i].style[styleK] = styleV;
}
return;
}
dom.style[styleK] = styleV;
}
return
},
/*
*添加多个类名
*element： 元素
*classnameArr：类名的数组
*/
addClassMany: function (element, classnameArr) {
var classNameArr = (element.className).split(' ') || [];
var newClassNameStr = '';
if (arguments.length != 2 && !(classnameArr instanceof Array)) {
throw new Error("参数形式个数不正确");
}
if (classNameArr == null) {
var newClassName = classnameArr;
} else {
for (var i in classnameArr) {
classNameArr.push(classnameArr[i]);
}
newClassNameStr = classNameArr.join(' ');
}
element.className = newClassNameStr;
return;
}
}
```
- css用法技巧
- 阴影被后面div遮挡
- 绘制一个三角形
- 图像的灰白处理
- 一切居中
- 禁用鼠标事件
- 模糊文本
- 字体省略号
- 垂直居中
- box投影
- css动画
- javaScript常见工具封装
- 地址栏参数获取
- 日期格式化
- Ajax
- scroll
- 缓动函数
- 事件绑定
- 阻止冒泡和默认行为
- 伪数组正常化
- 日期生成
- 拷贝
- javaScript基本知识
- javaScript基本知识
- javascript常见代码块
- vue常见问题
- 获取参数
- vue常见问题/vue混入
- v-html指令问题集锦
- 正则获取html中所有的中文字符
- 时间格式化
- 监听路由的变化
- vue移动端滑动事件
- vue移动端图片点击放大
- 打包后背景图片404的问题
- webpack打包后部分样式失效
- IE的兼容问题
- post请求后台无法接受参数
- 验证码
- vue开启Gzip报错
- v-html修改样式
- app.css文件过大
- vue中中使用iframe
- babel对es6编译不彻底 出现ie不兼容的问题
- vue单页应用优化
- 吸顶问题
- 跨域session无法共享
- 登陆返回上一页
- axois中使用delete数据传递问题
- 监听数组对象数组中的属性
- webpack
- webpack基本使用
- webpack打包删除注释
- js插件
- 轮播图
- 面向对象模板
- 左滑右滑
- 存储
- appcan
- appcan
- js深入研究
- 数组的参数传递问题
- 采用jquery的方法载入公共页面后出现闪烁的问题
- html拼接无法绑定事件
- 吸顶问题
- async配合promise使用
- flutter
- 模拟器加载报错
- 底部导航实现
- 模拟器出现错误
- flutter在idea下的快捷键
- flutter学习笔记
- 设计模式
- 观察者模式
- nest
- nest基本说明
- nest错误处理
- vue高级
- 动态注入路由
- nest实战
- 一项目准备
- window
- 端口进程被占
- mis包
- reactNative
- react-native-router-flux
- esLint
- eslint
- Cesium