实现图片首尾平滑轮播(JS原生方法—节流)

首先给出超文本标记语言代码，要注意轮播图片表(#列表)末尾加上第一个图片1.jpg，在首部加上最后一个图片5.jpg。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题首尾轮播/title link rel='样式表href='首尾轮播css' rel='外部nofollow '脚本src='http:首尾轮播js '/script/head body div id=' container ' div id=' list ' diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/5。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/1。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/2。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/3。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/4。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/5。jpg ' alt=' '/a/div diva href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' img src=' http 3360./imgs/1。jpg ' alt=' '/a/div/div class=' arrow ' id=' prev '/div class=' arrow ' id=' next '/div/div/body/html接下来给出钢性铸铁和射流研究…代码，大家可以酌情根据图片的大小、数量、宽度，调整容器、列表的参数，这也是封装射流研究…所要考虑的参数。

* { margin : 0；padd : 0；} #容器{高： 400像素宽度： 500像素；margin: 0自动相对位置：飞越：隐藏；border: 1px纯黑；}#listdiv {左侧浮动：} # list { position:绝对值高度： 400像素；宽度： 3600 px} # list img { height: 400px宽度： 500像素；}.箭头{用户-选择：无；绝对位置：top :150 pxz-index : 2；背景-颜色： # AAA高度： 100像素；宽度： 80px光标：指针；opa city 3360 0.5 display :无；线高： 100像素；文本对齐：中心；color : # 222 font-size : 3 em；} #容器：悬停.箭头{显示：块；} #上一个{ left:20px} #下一个{ right: 20px}在射流研究…中，我们可以通过改变速度变量来控制图片切换的速度.这里用的是元素。样式。过渡来控制的过渡效果。

窗户。onload=function(){ var container=document。getelementbyid(“容器”)；var列表=文档。getelementbyid(' list ')；//获取图片容器var prev=文档。getelementbyid(' prev ')；//向前按钮var next=文档。getelementbyid(' next ')；//向后按钮var nowP=1；//显示位置var judge=null/执行权变化速度=0.1;//切换速度秒prev.onclick=function(){ if(！judge){ judge=setTimeout(function(){ if(nowP==1){ setTimeout(function(){ list }。风格。过渡=“左0s”；名单。风格。左='-2500 px '；nowP=5；},速度* 1000);} //当到达图片表左边缘时与动画同步切换名单。风格。过渡=“左”速度；移动(500);nowP-；judge=null}，速度* 1000);} };next.onclick=function(){ if(！judge){ judge=setTimeout(function(){ if(nowP==5){ setTimeout(function(){ list }。风格。过渡=“左0s”；名单。风格。左='-500 px '；nowP=1；},速度* 1000);} //当到达图片表右边缘时与动画同步切换名单。风格。过渡=“左”速度；移动(-500);nowPjudge=null }，速度* 1000);} };函数move(num){ var term=Parsent(list。风格。左)numlist.style.left=术语“px”；} var roll=SetInterval(function(){ next。onclick()；},2000);集装箱。onmouseenter=function(){ clearInterval(roll)；};集装箱。onmouseleave=function(){ roll=setInterval(function(){ next。onclick()；},2000);};};下面是一个演示演示，简单来说原理就是在切换到图片表首和表尾的动画开始时，设置一个延迟执行时间与动画过渡时间相同的setTimeout函数来执行瞬间切换，再通过节流来保证最大的切换速度（速度).

本人也是初学前端，如果有帮助的话，点一下推荐吧

以上这篇实现图片首尾平滑轮播(JS原生方法—节流)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。