142 lines
4.3 KiB
Markdown
Executable File
142 lines
4.3 KiB
Markdown
Executable File
---
|
||
title: 解析卡片式轮播图
|
||
date: 2017-06-24 23:18:35
|
||
tags: [轮播图]
|
||
categories: JS
|
||
---
|
||
|
||
> 小记：前两天面试，展现项目过程中经理问我轮播图的原理，我一脸懵逼，因为当时有现成的插件，所以我没怎么去研究，当然，我也知道该来的还是要来的...
|
||
|
||
首先我大概讲一下，传统轮播图的主要部分：
|
||
|
||
* 图片（废话）
|
||
* 左右两边的button
|
||
* 可以跳转的小点
|
||
|
||
[demo](http://jzxer.cn/card/)
|
||
|
||
### 原理
|
||
|
||
* 轮播图的原理就是一个长图，里面有很多张图，外面包一层展示窗口，将属性设置成overflow：hidden，达到只显示一张的效果，当点击左右两边的按钮时会按照像素来跳转
|
||
|
||
### 无限滚动
|
||
|
||
* 我给两个按钮设为 <b>prev next</b> 一个在点击后，长图会增加一张图的宽度，一个是减少一个图的宽度,在图片的头和尾部加一张图，结构大概为：
|
||
|
||
```html
|
||
<div id="list" style="left:-200px">
|
||
<img src="./img/5.jpg" alt="">
|
||
<img src="./img/1.jpg" alt="">
|
||
<img src="./img/2.jpg" alt="">
|
||
<img src="./img/3.jpg" alt="">
|
||
<img src="./img/4.jpg" alt="">
|
||
<img src="./img/5.jpg" alt="">
|
||
<img src="./img/1.jpg" alt="">
|
||
</div>
|
||
```
|
||
|
||
当是最后一张图或第一张图时，将第一张上一张跳转为最后一张时的宽，最后一张跳转为第一张时的宽
|
||
|
||
```js
|
||
if (newList < -1000) {
|
||
dot = 1
|
||
list.style.left = -200 + 'px'
|
||
}
|
||
if (newList > -200) {
|
||
dot = 5
|
||
list.style.left = -1000 + 'px'
|
||
}
|
||
```
|
||
|
||
### 小按钮切换
|
||
|
||
这要实现的思想有
|
||
|
||
* 点了小按钮，背景色会变
|
||
* 当点击切换到其他按钮，图片切换，且上一个按钮会变回原来的颜色
|
||
|
||
```js
|
||
function showBtn() {
|
||
for (var i = 0; i < btns.length; i++) {
|
||
if (btns[i].className == 'show-btn') {
|
||
btns[i].className = ''
|
||
break
|
||
}
|
||
}
|
||
btns[dot-1].className = 'show-btn'
|
||
}
|
||
//遍历数组，将有该属性设为空
|
||
|
||
for (var i = 0; i < btns.length; i++) {
|
||
btns[i].onclick = function () {
|
||
if (this.className == 'showBtn') {
|
||
return
|
||
}
|
||
var myIndex = parseInt(this.getAttribute('index'))
|
||
var leng = -200 * (myIndex - dot)
|
||
animate(leng)
|
||
dot = myIndex
|
||
showBtn()
|
||
}
|
||
}
|
||
//遍历数组，将每一个小按钮设了个index属性，这里用到 getAttribute 可以获取除了普通style 或 class 之外的一些属性，获取index值，点击时得到当前的index值，正好和当前的dot值相减，可得跳转的距离
|
||
```
|
||
|
||
> 这里要注意的是，当小按钮被重复按的时候，给他一个判断，不然重复点击同一个图标会重复发生相同事件，占内存，耗cpu
|
||
|
||
### 延迟动画函数
|
||
|
||
就是当用户点击时，有一个慢慢偏移的过程，而不是闪现的动作，我们来看看实现原理
|
||
|
||
* 首先，定义参数
|
||
|
||
```js
|
||
var time = 300 //位移总时间
|
||
var interval = 10 //位移时间间隔
|
||
var speed = leng/(time/interval) //每次位移量，就是一共调用多少次的意思
|
||
```
|
||
|
||
* 设置递归函数
|
||
|
||
```js
|
||
if ((speed < 0 && parseInt(list.style.left) > newList) || (speed > 0 && parseInt(list.style.left) < newList)) {
|
||
list.style.left = parseInt(list.style.left) + speed + 'px'
|
||
setTimeout(go, interval) //递归,调用自身函数
|
||
```
|
||
|
||
* 判断是否仍在动画
|
||
|
||
如果用户一直在点击切换图时，如果电脑配置不好，或是其他一些因素，可能会轮播卡顿，为了防止这一现象，就用一个判断来看上一次动画是否完成，若未完成就不能继续切换，等到这次动画跳转完为止
|
||
|
||
```js
|
||
var animated = false //设初值
|
||
|
||
if(!animated) {
|
||
animate(200)
|
||
} //如果为false，则继续动画
|
||
```
|
||
|
||
### 自动播放
|
||
|
||
首先给个思路，当鼠标移入的时候，自动播放停止，移出的时候开始自动播放
|
||
|
||
* 我们设两个函数，play（） 和 stop（）
|
||
|
||
```js
|
||
function play() {
|
||
timer = setTimeout(function() {
|
||
next.onclick()
|
||
play()
|
||
},interval)
|
||
}
|
||
function stop() {
|
||
clearTimeout(timer)
|
||
}
|
||
```
|
||
|
||
给整个 container 容器添加该鼠标事件
|
||
|
||
这年头还是不能偷懒啊，说不定当时知道这个人家就把给我要了呢，好气哦...
|
||
|
||
> 改天再研究下旋转木马的那种装个13...
|