详细说明如何实现简易轮播效果

开发工具与关键技术：vs code，JavaScript、jQuery、html、css

1、思路：
最基本的轮播要怎样简化？如何拥有够好的扩展性？如何拥有够好的实用性？

2、html布局：
1、如图：
目的——首先明白移动层body类的作用：这个元素内包裹的元素就是移动的元素，当body这个类随意使用某个可移动的样式时，内容元素就会随着body类移动而移动；

问题（1）：当知道要移动body类就可以形成轮播的初步运作逻辑时，body类中的内容元素布局就会很关键！我们要将内容元素连着平铺在body这个类中！这个案例中，我给body类的样式改变了display，改成了flex，这样内容元素就会整个平铺在body类中。
如图：
2、如何将内容元素做到100%大小：

图中，给body类的宽度设定了1000%，每个内容元素设置为10%，直观看是10%，但是body类的宽度设为了1000%，也就是说内容元素的宽度10%是依照父元素也就是body类进行设置的。
所以！这里10%就是body类1000%里的100%（1000 / 10 = 100）

3、overflow给谁？为什么要给它？

都知道这个是关键，所以消除边界外的内容肯定是整个轮播的最外层的那个元素。
解释：在图中可看到移动层body类跟控制层clickbutton类被整个轮播内容类content类包裹，控制层也不是内容层那样是占用主力空间的元素。所以将overflow：hidden这个属性给在content类上，这样轮播的结构才是稳固的一体性的！
好处：轮播外的元素可以移入进来，轮播内的元素在轮播外看不见。

4、控制层和html结构拓展性说明
控制层是一部分刚入前端的小白所踩的坑。这里先重点说明：控制层千万千万千万别创建在移动层中，如果你要使用这篇文章说明的轮播效果，那么控制层绝对不能创建在移动层中！否则移动层设置属性值移动时控制层也会像内容元素一样跟着跑！
这里又涉及到结构扩展性的问题，够好的结构是可以明确分明 “一级” 跟 “二级” 元素的层级关系，这就是刚涉及前端的小白犯问题的地方，结构不正确！不正确的结构会导致css样式的设置出现问题，例如position定位的相对、绝对定位。

假设内容的主元素是一级元素，那么往下的直接子元素就是二级元素，二级元素往下的直接子元素就是三级，然后一直往下会有很多的子元素。

当我们将主元素设置为body类，那么body类就是一级元素，它的直接子元素是二级元素。二级元素跟二级元素是相同的也就是兄弟元素，都属于二级元素。

所以在结构上，控制层不能创建在移动层内，不然这里的控制层会被移动层当作是二级元素！当移动层内出现了控制层，控制层的兄弟元素将会是可移动的内容元素！移动层移动后，你要的控制元素可能会不可见！

5、移动层的样式问题
我们要让移动层动起来，肯定不能没有过渡属性，当然在js中使用jQuery里的animate方法设置属性达到动画效果也是可以的，animate的这种方法会在不间断轮播中用到。
首先要看我们的目的性：我们的目的不就是让移动层移动吗？所以给body类设置一个相对定位，再给一个transition属性，时间自定义。如图：

这里也有一个小误区：设置left的位置。
如果将left设置在style样式中，那么，你如果使用js去更改他的left值达到移动效果时，他会先将你设置的值给予在内联样式上，而不是直接更改style样式中的left值！这种的效果在未赋予left于内联样式上的时候会第一步赋予在内联样式上！这一步，没有过渡效果！使用jQuery或许就没有这种问题，为了保险我们还是将left值设置在内联样式上；
如图：

3、JavaScript部分
首先该理解的是当点击按钮时移动层的left值变动。
这里使用jQuery写法，为两个按钮绑定点击事件。这里#next为下一张，#prev为上一张。

绑定好事件后，设置关键的两个全局变量。
一个是index用于记录当前所在内容屏数。
另一个是num用于设定当前的移动距离，100%就是100，多少宽度就是设置多少宽度。
这两个几乎是所有轮播中必备的变量，一定不能忘了用！

图中没有写到，需要再来一个全局变量move，这个变量只需要创建就好值是空的也没问题

1、点击按钮的事件内容
移动的内容只有这么点。

第一行代码：点击后，内容肯定要换到下一屏内容，所以记录屏数的index变量自加1不难理解。
第二行代码：move的这个变量，也需要是全局变量，因为这个变量就是记录着整个轮播的移动量！上一张和下一张都需要看这个值的多少。
第三行代码：最后将这个计算过后的move值替代left的值，那么点击“下一张”按钮后就可以看清楚运动轨迹了。
“#prev（上一张）”按钮的事件一样，只是将index自加改为了index–（自减）而已。
这里left的设置是设置body类（移动层）喔！不要设置错了！否则是搞大问题！

2、最后一屏内容的处理
最后的处理点就是移动至最后一屏再次点击按钮后出现的内容。
如图：

通常处理就是加上if判定，判定内容是index（记录屏数的变量）是否等于最后一屏内容。

1-问：这一步的关键是明白index == 4 意味着什么？
1-答：意味着我们所见屏数来到了最后一屏内容，再次按下按钮需要回到第一屏或者最后一屏。

2-问：if判定为什么要放在事件的第一行？
2-答：因为这个判定的内容是判定index变量，所以必须放在index自减或自加的前面；最保险的就是放在第一行。

明白if判定的内容后，再看判定内执行的代码。
首先在脑内构思。在最后一屏内容，再次按下按钮触发了判定，我们需要将可见屏数调回第一屏或最后一屏，所以index 肯定是要重新设置。由于index是全局变量所以if内index值改变是会影响到click事件外的index值的，这也是全局变量的用处之一；
图中显示的是点击“下一张”的按钮所以，这里if内的index重新设置为0（第一屏数）然后将移动的主体代码重新放进if内就好了。
最后！如果不加上else将if外的代码包裹的话，那么这里if内的执行代码，在最后一定要return返回。不然会再次执行if判定外的代码！
“#prev（上一张）”的点击事件中的if判定跟图中的if判定的思路是一样的。同样是判定的最后一屏，更改返回的屏数。

技术点总结：怎么说，轮播的技术点参合了许多的知识点。是刚学前端的人必须跨过去的坎，轮播的形成方式有很多，不只限于这篇文章中的更改left值作为主轮播效果，也可以使用transform: translateX();来移动 “移动层”。再多说一句，轮播的html结构是很重要的！别以为只是单纯的js而已。

希望本篇文章能够帮到你；

源代码（直接复制后，别忘了引入jQuery）。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础的轮播效果</title><!-- 样式 --><style>body {margin: 0;padding: 0;}.content {overflow: hidden;}.body {transition: all .5s;width: 1000%;display: flex;position: relative;}[litem="causel"] {width: 10%;height: 320px;text-align: center;line-height: 280px;font-size: 30px;}.img1 {background-color: red;}.img2 {background-color: yellow;}.img3 {background-color: blue;}.img4 {background-color: green;}.img5 {background-color: orange;}.clickbutton {display: flex;justify-content: center;}.clickbutton>button {margin: 0 50px;width: 80px;height: 50px;}</style>
</head><body><!-- 页面内容渲染 --><div class="content"><!-- 移动层 --><div class="body" style="left: -0%;"><div class="img1" litem="causel">1</div><div class="img2" litem="causel">2</div><div class="img3" litem="causel">3</div><div class="img4" litem="causel">4</div><div class="img5" litem="causel">5</div></div><!-- 控制层 --><div class="clickbutton"><button id="prev">◀</button><button id="next">▶</button></div></div><!-- jQ引入 --><script src="./jquery-3.2.1.min.js"></script><!-- js部分 --><script type="text/javascript">$(function () {var index = 0;//记录当前内容var num = 100//移动距离var move// 下一张$("#next").click(function () {if(index == 4){index = 0move = num*index$(".body").css("left" , "-"+move+"%")return}index++ move = num*index$(".body").css("left" , "-"+move+"%")});//    上一张$("#prev").click(function () {if(index == 0){index = 4move = num*index$(".body").css("left" , "-"+move+"%")return}index--move = num*index$(".body").css("left" , "-"+move+"%")});})</script>
</body></html>

详细说明如何实现简易轮播效果相关推荐

给UIScrollView添加category实现UIScrollView的轮播效果
给UIScrollView添加category实现UIScrollView的轮播效果大家都知道,要给category添加属性是必须通过runtime来实现的,本教程中给UIScrollView添加c ...
用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body><div class="pic"><div cl ...
Qt之实现图片轮播效果
一.简述今天文章讲述的是如何用Qt实现图片轮播的效果,其实我们经常在网页中看到各种广告就是使用了图片轮播,实现小区域内嵌入多个广告的效果. 下面是CSDN页面中两种常见的图片轮播效果.基本上就是定时 ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
android 自适应图片轮播,Android使用Recyclerview实现图片轮播效果的方法
Android使用Recyclerview实现图片轮播效果的方法发布时间:2020-06-23 15:47:58 来源:亿速云阅读:113 作者:清晨这篇文章将为大家详细讲解有关Android使 ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
Bootstrap对于不会设计的童鞋很有用. Twitter设计师的前台框架中文官网:http://v3.bootcss.com/ 导入包等信息: <head> <meta htt ...
html的轮播点怎么设置,html轮播效果的实现
要实现如下图的效果点击可以选择图片:不点击的时候自动轮播:并且点击完后再次自动轮播. 思路:如同在房子里透过窗子看路过的火车一样,窗子是不动的,但火车是陆续经过窗子的,所以透过窗子可以看到依次看完所 ...
web前端入门到实战：以轮播效果为案例谈如何写优质代码
作为程序员大家在写代码时谈的最多的就是代码的拓展性.复用性.本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践. 文章分三个步骤.第一步,实现基本功能:第二步,考虑到代码的封装性和复用性: ...

详细说明如何实现简易轮播效果

详细说明如何实现简易轮播效果相关推荐

最新文章

热门文章