Javascript专题（三）b.各种轮播和细节分析--上下滚动轮播

这一次，我们用原生JS实现上下滚动方式的轮播。顺带学习一下用JS来创建HTML元素。

上一次写的轮播是淡入淡出效果的，相对来说其实是比较简单的。

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();

  // 起始的时候默认开始

至此，我们的自动上下滚动轮播完成。

上下轮播源码-github

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代码 ...

随机推荐

bzoj 4034: 树上操作线段树
题目: 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所有点的点权都增加 ...
使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与安装 Anthem.NET可 ...
redis源码笔记 - redis-cli.c
这份代码是redis的client接口,其和server端的交互使用了deps目录下的hiredis c库,同时,在这部分代码中,应用了linenoise库完成类似history命令查询.自动补全等终 ...
[转]各种开源协议介绍 BSD、Apache Licence、GPL V2 、GPL V3 、LGPL、MIT
现今存在的开源协议很多,而经过Open Source Initiative组织通过批准的开源协议目前有58种(http://www.opensource.org/licenses /alphabeti ...
发布倒计时！JDK11为我们带来哪些新特性?
今年7月底,JDK11已经进入了Rampdown Phase Two阶段,这标志着该版本所有特性已经被冻结,不会有新的JEP会加入版本中. 这一阶段将会修复P1–P2级BUG,之后,JDK11预定于今 ...
Velocity的layout功能
一.从VelocityViewServlet到VelocityLayoutServlet 使用Velocity开发web应用时,需要在web.xml中配置一个Velocity提供的VelocityVi ...
win10系统的简单优化
1.关闭自带杀毒软件Windows Defender操作简要:在gpedit.msc 组策略-计算机管理——>管理模板——>windows组件——>windows defender ...
问题：webservice浏览后无法输入参数；结果：调试Web Service时不能输入参数的解决办法
使用.NET 开发Web Service,有一个很方便的功能就是可以通过IE直接测试Web Service.当你的Web Service的参数都是元数据类型,那么只要你使用IE浏览Web Servic ...
Ajax的包装
/** * Created by Administrator on 2016/12/27. *//** * 创建XMLHttpRequest对象 * @param _method 请求方式: post ...
poi包的几行基本的设置单元格样式
——杂言:写过很多遍这段代码,今天姑且记录一下,便于翻阅. jar:poi-3.7.jar 注意:第8行应该调用cellStyle.setFillForeGroundColor(HSSFColor.G ...