Javascript专题（三）b.各种轮播和细节分析--上下滚动轮播
这一次，我们用原生JS实现上下滚动方式的轮播。顺带学习一下用JS来创建HTML元素。
上一次写的轮播是淡入淡出效果的，相对来说其实是比较简单的。
github源码: 上下轮播源码-github
A. 先将基本架构搭好。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, div, ul, li {
margin:0;
padding:0;
list-style: none;
border: 0;
}
</style>
</head>
<body>
<div id="box">
<ul class="list-image">
<li><img src="pic1.jpg" width="500px" height="200px"></li>
<li><img src="pic2.jpg" width="500px" height="200px"></li>
<li><img src="pic3.jpg" width="500px" height="200px"></li>
<li><img src="pic4.jpg" width="500px" height="200px"></li>
<li><img src="pic5.jpg" width="500px" height="200px"></li>
</ul>
</div>
</body>
<script></script>
</html>
B. 这里我们用JS来添加HTML元素，以图片的个数来添加按钮的个数。写在我们的script标签之中。
const oBox = document.getElementById("box");
const oUl = oBox.getElementsByTagName("ul")[0];
const oImage = oUl.getElementsByTagName("li");
// 根据图片 li 的个数生成同样数量的 按钮 li
let eleArr = [];
for (let i = 0; i < oImage.length; i++) {
eleArr.push("<li>" + (i + 1) + "</li>");
}
// 创建节点元素并且添加节点元素至 html 里面
var oEle = document.createElement("ul");
oEle.className = "list-number";
oEle.innerHTML = eleArr.join("");
oBox.appendChild(oEle);
此后效果如下：
C. 之后修改style里面的样式
/* reset */
body, div, ul, li {
margin:0;
padding:0;
list-style: none;
border: 0;
}
body{
background: #fff;
}
/* wrap */
#box {
position: relative;
width: 502px;
height: 202px;
margin: 10px auto;
border: 8px solid #002232;
}
/* image */
#box .list-image {
width: 500px;
height: 200px;
overflow: hidden;
}
#box .list-image li {
border: 1px solid purple;
width: 500px;
height: 200px;
/*这里也设置宽高，解决的是默认行间距问题*/
}
#box .list-image li img {
width: 500px;
height: 200px;
}
/* number */
#box .list-number {
position: absolute;
right: 0;
bottom: 5px;
}
#box .list-number li {
float: left;
margin-right: 10px;
width: 20px;
height: 20px;
font: 12px / 20px Arial;
border-radius: 10px;
background-color: #f60;
text-align: center;
color: #fff;
opacity: 0.7;
filter: alpha(opacity = 70);
cursor: pointer;
}
#box .list-number li.current {
opacity: 1;
filter: alpha(opacity=100);
}
- 其中的
filter: alpha(opacity=100)主要用于兼容IE7 - 行内文字的垂直居中需要使得
line-height于height相同 - 这里的
line-height采用三者的简写font: 12px/20px Arial，分别简写了font-size,line-heiht,font-family.
D. 接下来，我们来实现上下滚动的JS代码，我们先实现手动版本的。
修改JS如下
const oBox = document.getElementById("box");
const oUl = oBox.getElementsByTagName("ul")[0];
const oImage = oUl.getElementsByTagName("li");
// 根据图片 li 的个数生成同样数量的 按钮 li
let eleArr = [];
for (let i = 0; i < oImage.length; i++) {
eleArr.push("<li>" + (i + 1) + "</li>");
}
// 创建节点元素并且添加节点元素至 html 里面
var oEle = document.createElement("ul");
oEle.className = "list-number";
oEle.innerHTML = eleArr.join("");
oBox.appendChild(oEle);
// 手动点击，触发轮播的触发函数
const oNumber = oEle.getElementsByTagName("li");
for (var i = 0; i < oNumber.length; i++) {
oNumber[i].index = i;
oNumber[i].onmouseover = function () {
Show(this.index);
}
}
// 轮播触发，并且内部调用移动效果函数
function Show(index) {
for (let i = 0; i < oNumber.length; i++) {
oNumber[i].className = "";
}
oNumber[index].className = "current";
Move(index);
}
// 移动效果函数
function Move(index) {
}
E. 接下来我们来实现移动函数
实现上下滚动,我们想一下要怎么实现，应该就是改变absolute元素高度吧？探索过程
function Move(x) {
console.log(oUl.offsetHeight); // 202
console.log(oUl.offsetTop);//0
oUl.offsetHeight = 100;
oUl.offsetTop = 100;
console.log(oUl.offsetHeight);//202
console.log(oUl.offsetTop);//0
}
诶，我发现不行？？修改不了offsetHeight和offsetTop啊！查阅一下资料原来是这样子！
预备知识：offsetTop、offsetLeft、offsetWidth、offsetHeight
我们知道 offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
- offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。(这里的style.top是读的css样式中的top:20px;这种形式的值,所以是带有"px"的)
- offsetTop 只读，而 style.top 可读写。(style.top赋值切记加上"px",测试过发现IE下用数值是可以的,但其它主流chrome,opera,ff,safari都不能识别,所以必须加"px")
- 如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也都是类似区别。------------offsetTop 与style.top之间的区别
综上所述，我们应该修改absolute元素的sytle.top才行。所以，首先，我们要让我们被移动的框变为absolute
所以我们先给我们要移动的地方添加 absolute,继续修改CSS
#box .list-image {
position: absolute;
border: 1px solid #fff;
width: 500px;
height: 200px;
overflow: hidden;
}
然后添加JS，于是我们加入以下代码看看效果！
function Move(x){
oUl.style.top=-100+"px";
// 赋值的时候要加上"px"
alert(oUl.style.top);
}
效果图是这样的---
诶，这个是我们的预期吗？？？？？？？？？？？？？
不是，那么是为什么呢！因为！！这里的overflow:hidden
#box .list-image {
position: absolute;
border: 1px solid #fff;
width: 500px;
height: 200px;
overflow: hidden;
}
我们所移动的oUl就是它，而我们在这里写了overflow:hidden; ，那它就会把超出的部分全都隐藏了，然而我们要让它的长度足以装下所有的图片。我们应该让它的父级隐藏起来。像是夹着尾巴的人一样。
也就是说，我们不能让它被隐藏。那么，我们一方面不能让这么长的一列图片耷拉下来，一方面又要实现overflow，于是，我们在oBox(oUl的父级)的地方用overflow就可以了
#box {
position: relative;
width: 502px;
height: 202px;
margin: 10px auto;
border: 8px solid #002232;
overflow: hidden;
}
/* image */
#box .list-image {
position: absolute;
border: 1px solid #fff;
width: 500px;
height: 200px;
}
变成了这样----
接下来，我们改变相关的赋值，使其达成我们想要的效果吧！
function Move(index) {
oUl.style.top = -index * 202 + "px";
}
可以看见我们已经达成了我们的预期。
F. 漂亮的移动效果
我们发现切换正常！之后我们来做缓冲的效果，来使切换不那么突兀。我们来思考一个缓冲效果，比如我们可以做一个让它越到目的地速度越慢的缓冲效果。
修改移动函数如下
// 移动效果函数
let timer = null;
function Move(index) {
clearInterval(timer);
let target = -index * 202;
timer = setInterval(function() {
let speed = (target - oUl.offsetTop) / 10;
// 速度为 目标位置 - 当前位置
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
oUl.offsetTop === target ? clearInterval(timer) : oUl.style.top = oUl.offsetTop + speed + "px";
// 没有到达目标，则不停止。
}, 30);
}
具体思想就是：
- 令
x*oImage[0].offsetHeight为我们的目标值此处的 offsetHeight 为202 px. - 我们设置target为目标不变，通过我们所处的位置和目标位置的差值作为速度speed的变化量，即离目标越远，我们越快.
- 然后让speed为整数，注意，如果这里不加这句话我们会有bug，取整，图片不能完美移动和重合.
我们可以看到，我们的需求基本完成了。剩下的就是锦上添花了。
G. 锦上添花，自动轮播
之后我们还是来实现其自动轮播的效果，与上一个专题很像。
加入代码
// 添加自动轮播函数
let nowIndex = 0;
let autoTimer = null;
oBox.onmouseout = function() {
auto();
}
oBox.onmouseover = function() {
clearInterval(autoTimer);
}
function auto() {
autoTimer = setInterval(() => {
if (nowIndex < oImage.length - 1) {
nowIndex ++;
} else {
nowIndex = 0;
}
Show(nowIndex);
}, 2000);
}
auto();
// 起始的时候默认开始
至此，我们的自动上下滚动轮播完成。
Javascript专题（三）b.各种轮播和细节分析--上下滚动轮播的更多相关文章
- 天猫京东app中常见的上下滚动轮播效果如何实现？
前段时间,公司安排我制作一个上下滚动轮播效果,类似于我们在天猫京东app中常见的这样: 哇kao!这个我完全不会呀??? 幸好,前几天一个朋友在朋友圈分享了一篇推文.瞬间引领我走出了迷茫,这个教程特别 ...
- Javascript专题（三）c.各种轮播--上下滚动轮播(面向对象版本)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap轮播组件之“如何关闭自动轮播”
在一个页面里使用多个bootstrap轮播组件的时候,如果还让所有轮播图都自动轮播的话,整个画面都在动,会给用户一种很不好的体验感受.所以,需要关闭轮播图的自动轮播. 关闭方法:去除如下属性即可: d ...
- 偏前端-纯css,手写轮播-（焦点切换 和 自动轮播 只可选择一种，两者不可共存）
现在我们一般都是在网上找个轮播插件,各种功能应有尽有,是吧!!~大家似乎已经生疏了手写是什么感觉.万一哪天想不起来,人家要手写,就尴尬了!~~跟我一起复习一下吧 不多说:效果图看一下: 高度不能是固定 ...
- swiper4自动轮播切换手动触碰后停止踩坑——属性disableOnInteraction
swiper4轮播设置autoplay自动切换后,即默认设置: <script> var mySwiper = new Swiper('.swiper-container', { auto ...
- javascript效果：手风琴、轮播图、图片滑动
最近都没有更,就来几个效果充实一下. 都没有进行美化这步. 手风琴: 纯css: <!DOCTYPE html> <html lang="en"> < ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 使用javascript,jquery实现的图片轮播功能
使用javascript,jquery实现的图片轮播功能本功能采用最基础的javascript和一些简单的jquery技术实现,易理解,以修改使用,代码简易,适合刚开始接触到网站开发的朋友们参考.可以 ...
- 使用JavaScript制作一个好看的轮播图
目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...
随机推荐
- Nginx-rtmp模块实现流媒体play、push、pull功能
官方wiki:https://github.com/arut/nginx-rtmp-module#readme Nginx rtmp 功能特点 1. 支持音视频直播 2. 支持flv/mp4视 ...
- bzoj 3514: GERALD07加强版 lct+可持久化线段树
题目大意: N个点M条边的无向图,询问保留图中编号在[l,r]的边的时候图中的联通块个数. 题解: 这道题考试的时候没想出来 于是便爆炸了 结果今天下午拿出昨天准备的题表准备做题的时候 题表里就有这题 ...
- Django中的事务（Transaction）管理
Django默认的事务行为 默认情况下,在Django中事务是自动提交的.当我们运行Django内置的模板修改函数时,例如调用model.save()或model.delete()时,事务将被立即提交 ...
- loadrunner的四个主要部件
1.VUser Generator :性能脚本开发 2.Controller :提供多线程并发操作 3.Analysis :结果分析 4.Load Generator :负载生成器 ***负载生成器完 ...
- JavaScript-Tool：my97datepicker
ylbtech-JavaScript-Tool:my97datepicker 1.返回顶部 1. 2.下载 https://files.cnblogs.com/files/storebook/java ...
- linux日常管理-top动态查看负载
动态查看负载命令,具体哪个程序,哪个进程造成的系统负载. top 回车查看 3秒更新一次 第一行和uptime和w第一行显示的一样. CPU使用率,us sy 内存相关,Mem 一共多少,使用了多少, ...
- 【转】GitHub使用
1.设置Git全局用户配置 git config --global user.name "xxx" git config --global user.email xxx@gmail ...
- JAVAWeb SSH框架 利用POI 导出EXCEL，弹出保存框
导入包这一些不多说,直接贴出关键代码,JSP只要点一个Action链接就行. poi包我是用:poi-3.11-20141221.jar 亲测有效: 效果: Action 类代码: private I ...
- play 1.2.4的action执行前后的加载逻辑
——杂言:最近在整理这一年的笔记,打算慢慢温故一遍,然后搬到博客里头来.这篇是2013.06.18时候整理的关于action执行前后的一些载入先后顺序逻辑.我的理解可能有偏差,如果有错误的,请读者们及 ...
- [凸包]Triangles
https://nanti.jisuanke.com/t/15429 题目大意:给出平面内$n$个整数坐标点,保证无三点共线.可以进行若干次连线,每次选择一个点对连接线段,但是任意两条线段都不得在给定 ...