在团队中，突然有人问我如何实现轮播。进入前端领域一年多了，很久没有自己写了。一直是丹尼尔写的插件。今天，我将写一个适合初学者的简单教程。当然，轮播图有很多实现原理和设计模式。我说的是使用面向过程的函数式编程。与面向对象的设计模式相比，代码不可避免地会显得臃肿和多余。但是没有面向对象的抽象，非常适合初学者理解和学习。参加过BAT的同学希望少喷点。另外，你可以给出更多的意见。

转盘图的原理：

一系列大小相等的图片平铺，CSS布局只显示一张图片，其余隐藏。通过计算偏移量，可以使用定时器自动播放，也可以通过手动点击事件切换图片。

Html布局

首先，父容器存储所有内容，子容器列表有图片。子容器按钮存储按钮点。

div id=' container ' div id=' list ' style=' left :-600 px；'img src=' http : img/5 . jpg ' alt=' 1 '/img src=' http : img/1 . jpg ' alt=' 1 '/img src=' http 3: img/2 . jpg ' alt=' 2 '/img src=' http : img/3 . jpg ' alt=' 3 '/img src=' http 3360 img/4 . jpg ' alt='id=' prev ' class=' arrow '/a a href=' JavaScript :'Id='next' class='arrow'/a /div优化，无缝滚动。

当你从最后一张图片切换回第一张图片时，差距很大。用两张辅助图片来填补这个空白。

这里添加无缝滚动，直接看代码，复制第一张图片前的最后一张图片，复制最后一张图片后的第一张图片。另外，第一张图片的辅助图片(实际上是实际显示的第五张图片)是隐藏的，所以设置style=' left :-600 px；')

CSS装饰

1.对盒子模型、文档流和绝对定位的理解。

2.注意列表隐藏的飞越：窗口只显示一张图片，左右两边都隐藏。

3.确保按钮中每个跨度的图层位于顶部，并将其设置为顶部。(z-index:999)

* { margin : 0；padd : 0；文本装饰：无；}车身{ padding: 20px} #容器{ width: 600px高度： 400 px；border: 3px固体# 333；飞越：隐藏；相对位置：} # list { width: 4200px高度： 400 px；绝对位置：z-index : 1；} # list img { width: 600px高度： 400 px；向左浮动：} # buttons { position : absolute；height: 10px宽度： 100 px；z-index : 2；bottom: 20pxleft: 250px} #按钮跨度{cursor:指针；向左浮动：border: 1px实心# fff宽度： 10px；height: 10px边界半径：50%；背景技术： # 333；右边距： 5px；} #按钮。在{ background: orangered}.箭头{cursor:指针；display:无；线高： 39px；文本对齐：中心；font-size : 36px；font-weight:粗体；宽度： 40px；高度： 40px；绝对位置：z-index : 2；top: 180px背景-颜色： RGBA(0，0，0， 3)；color: # fff} . arrow : hover { background-color : RGBA(0，0，0， 7)；}#container:hover。箭头{display:块；} # prev { left: 20px} # next { right: 20px}Js

首先，我们实现了手动点击左右箭头切换图片的效果：

window . onload=function(){ var list=document . getelementbyid(' list ')；var prev=document . getelementbyid(' prev ')；var next=document . getelementbyid(' next ')；函数animate(offset) {//获取style.left，这是相对于左边的距离，所以style.left在第一张图片之后是负数，//和style.left获取字符串，需要通过parseInt()进行舍入并转换为数字。var NewLeft=ParSeint(list . style . left)偏移量；list . style . left=NewLeft ' px '；} prev . onclick=function(){ animate(600)；} next . onclick=function(){ animate(-600)；}}运行后，我们会发现如果一直点击右箭头，会出现空白，无法回到第一张图片。单击左箭头返回第一张图片。

使用谷歌浏览器F12，原因是我们使用向左偏移来获取图片。当我们看到左边的值小于3600时，因为没有第八张图片，所以会有一个空白，所以我们需要在这里对偏移量做出判断。

将此段落添加到动画功能中：

if(NewLeft-3000){ list . style . left=-600 ' px '；} if(NewLeft-600){ list . style . left=-3000 ' px '；}好的，运行一下，没问题。旋转木马，顾名思义，是一个移动的画面。此时，我们需要使用浏览器的内置对象计时器。

对于计时器，有必要解释setInterval()和setTimeout之间的区别。简单来说，setInterval()执行多次，setTimeout()只执行一次。

有关更具体的用法，请单击链接查看不同之处：window . setintervalwindow . settimeout。

这里，我们使用setInterval()，因为我们的图片需要循环滚动。在下面插入

var计时器；function play(){ timer=setInterval(function(){ prev . onclick()}，1500)} play()；快跑，好的！

然而，当我们想仔细看一张图片时，为了停止图片，我们应该知道计时器，这里我们使用了window.clearInterval的方法。

在这里，我们需要操作它的DOM，我们需要获得整个转盘区域。

var container=document . getelementbyid(' container ')；函数stop() {clearInterval(计时器)；} container.onmouseover=stopcontainer.onmouseout=play但是在这里，一个转盘基本上就完成了，有的同学会问，这么简单。看到图片下面的那排点了吗？我给你增加了功能。

-

以下是升级版本：

var buttons=document . getelementbyid(' buttons ')。getElementsByTagName(' span ')；var指数=1；函数buttonssshow(){//这里需要为(var I=0；长度；I){ if(button[I]。='on') {buttons[i]。className=} }//数组从0开始，所以index需要-1buttons [index-1]。' on '；} prev . onclick=function(){ index-=1；if(index 1){ index=5；} buttonssshow()；动画(600)；}next.onclick=function() {//由于上面计时器的作用，索引总会增加，我们只有5个小点，所以需要判断index=1；if(index 5){ index=1；} buttonssshow()；动画(-600)；}

现在看起来正常多了，但是我们想用鼠标点击任意一个点，切换到对应的图片。原理是一样的，我们还是需要通过偏移量找到对应的图片。

for(var I=0；长度；我){按钮[我]。onclick=function(){//optimization，点击当前图片中的当前点，无需执行以下代码。if(this . class name=' on '){ return；}/* offset acquisition:在这里，让鼠标移动到点的位置，用这个把索引绑定到对象按钮[i]，然后去Google一下这个的用法*//*因为这里的索引是一个自定义属性，你需要使用getAttribute()，一个DOM2级别的方法，来获取自定义索引的属性*/var click index=par sent(this。getattribute(' index '))var offset=600 *(clickIndex-index)；动画(偏移)；//存储鼠标点击后的位置，小点索引正常显示=点击索引；buttonssshow()；} }

各位，你们可能已经注意到这个旋转木马有点奇怪，不太令人满意。它转向左边。重写它：

函数play() {//将轮播图换成向右切换图片timer=setInterval(function(){ next。onclick()；}, 2000)} !DOCTYPE html html heartheta charset=' UTF-8 ' title/title style type=' text/CSS ' * { margin : 0；padd : 0；文本装饰：无；}车身{ padding: 20px } #容器{宽度： 600像素高度： 400像素；border: 3px固体# 333;飞越：隐藏；相对位置：} # list { width: 4200px高度： 400像素；绝对位置：z-index : 1；} # list img { width: 600px高度： 400像素；向左浮动：} # buttons { position : absolute；高度： 10px宽度： 100像素；z-index : 2；bottom : 20pxleft : 250 px } #按钮跨度cursor:指针；向左浮动：border: 1px实心# fff宽度： 10px高度： 10px边界半径： 50%;背景技术： # 333;右边距： 5px} #按钮。在{ background: orangered }。箭头cursor:指针；显示器：无；线高： 39px文本对齐：中心；font-size : 36px字体粗细：粗体；宽度： 40px高度： 40px绝对位置：z-index : 2；top: 180px背景-颜色： RGBA(0，0，0，3);color: # fff}。箭头：悬停{背景色： RGBA(0，0，0，7);} #容器：悬停.箭头{显示：块；} # prev { left : 20px } # next { right : 20px }/style脚本类型=' text/JavaScript '/*知识点：*//*这个用法*//* DOM事件*//* 定时器*/窗口。onload=function(){ var container=document。getelementbyid(“容器”)；var列表=文档。getelementbyid(' list ')；var buttons=文档。getelementbyid(' button ').getElementsByTagName(' span ')；var prev=文档。getelementbyid(' prev ')；var next=文档。getelementbyid(' next ')；定义变量指数=1;定义变量计时器；函数动画（偏移){//获取的是风格。左侧，是相对左边获取距离，所以第一张图后样式。左侧都为负值，//且样式。左侧获取的是字符串，需要用parseInt()取整转化为数字var NewLeft=ParSeint(列表。风格。左)偏移量；名单。风格。left=NewLeft ' px//无限滚动判断if(NewLeft-600){ list。风格。left=-3000 ' px '；} if(NewLeft-3000){ list。风格。left=-600 ' px '；} }函数play() {//重复执行的定时器timer=setInterval(function(){ next。onclick()；},2000)}函数stop() {clearInterval(计时器);}功能按钮Show() {//将之前的小圆点的样式清除for(var I=0；长度；如果(按钮[1]).='on') {buttons[i].className=}}//数组从0开始，故指数需要- 1个按钮[索引- 1]。类名=' on} prev。onclick=function(){ index-=1；if(index 1){ index=5 } buttonssshow()；动画(600);};next.onclick=function () {//由于上边定时器的作用，索引会一直递增下去，我们只有5个小圆点，所以需要做出判断索引=1;if(index 5){ index=1 } animate(-600)；buttonssshow()；};for(var I=0；长度；我)按钮.onclick=function () {//优化，当前图片点击当前的小圆点不执行以下代码。

如果(这个。类名=' on '){ return；}/* 这里获得鼠标移动到小圆点的位置，用这把指数绑定到对象按钮[i]上，去谷歌这的用法*//* 由于这里的指数是自定义属性，需要用到getAttribute()这个DOM2级方法，去获取自定义指数的属性*/var click index=parsent(这。GetAttribute(' index ')；定义变量偏移量=600 *(点击索引-index)；//这个指数是当前图片停留时的indexanimate(偏移量);索引=点击索引；//存放鼠标点击后的位置，用于小圆点的正常显示buttonssshow()；} } container . onmouseover=stop container . onmouseout=playplay()；}/script/head dydiv id=' container ' div id=' list ' style=' left :-600 px；img src=' http : img/5。jpg ' alt=' 1 '/img src=' http : img/1。jpg ' alt=' 1 '/img src=' http 3: img/2。jpg ' alt=' 2 '/img src=' http : img/3。jpg ' alt=' 3 '/img src=' http 3360 img/4。jpg ' alt=' id=' prev ' class=' arrow '/aa href=' JavaScript :'id=' next ' class=' arrow '/a/div/body/html以上所述是小编给大家介绍的简单的射流研究…轮播图代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！