JavaScript轮播停留效果的实现

一.思路

1.轮播停留非常类似于无线滚动，利用属性和变量控制移动实现轮播；

2.不同的是轮播停留需要加入过渡属性和定时器，达到轮播停留效果；

二、步骤

1.写出基本的结构风格

需要在最后再加一张图片，和第一张一样，消除切换时的抖动；

2.添加转盘停留事件有之前的基础，直接将索引圈默认事件添加到转盘停留事件中；

注意：旋转最后一张图片时，需要消除过渡。这里使用了setTimeout定时器，卡的最后一张图片旋转没有延迟，直接跳到第一张。因为第一个和最后一个一样，会形成视觉盲点，看起来是连续旋转的效果；

//carousel stop方法function move(){ box . name=' box an mint '；circle[count]. style . background COlOr=' '；计数；box . style . margin left=(-800 * count)' px '；//最后一个完成后，执行无周期定时器，卡过时间，取消开关settimeout(function(){ if(count=6){ count=0；box.className=' box//移除过渡属性框之前，margin left=0 . style . margin left=' 0px '；} circle[count]. style . background COlOr=' red '；}, 500);}3.添加一个事件进入索引圈

这与淡入淡出进入索引圈事件基本相同，但不同的是不需要调用carousel stay事件，直接使用当前索引对图片进行索引来跟随变换注意count=this.index的值要标记为finally，这样当再次执行默认行为时，默认行为会跟随当前显示的图片向后执行；

//输入(var j=0；jcircle.lengthj ){圆圈[j]。index=j；圆圈[j]。onmouseenter=function(){ for(var k=0；kcirc le . length；k){ circle[k]. style . background COlOr=' '；} this . style . background COlOr=' red '；//用box.className=' box anmint '移动图片；box . style . margin left=(-800 * this . index)' px '；count=this.index}}4.改进鼠标进入和退出代码

渲染：

完整代码：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title js轮播停留效果/title style * { margin : 0；padd : 0；} html，正文{宽度： 100%；高度： 100%;} .块{宽度： 800像素高度： 400像素；余量： 80px自动；相对位置：border: 1px纯红；飞越：隐藏；} .盒子{宽度： 5600px高度： 400像素；向左浮动：} .安明特{ transition: all 0.5s轻松自在；} img {宽度： 800px高度： 400像素；向左浮动：} .cir { width : 150 pxh arrest : 20 pxz-index : 7；绝对位置：bottom: 10pxleft: 320px}。圆形{ width : 10px x8 : 10pxborder : 2px纯灰色；边界半径： 50%;向左浮动：margin : 0 5px }/样式脚本窗户。onload=function(){ var box=document。getelementsbyclassname(' box ')[0]；定义变量计数=0;//索引圈事件var circle=文档。getelementsbyclassname(' circle ')；圆圈[0].风格。背景颜色='红色'；var time=setInterval(function(){ move()；},2000);//鼠标进入事件var block=文档。getelementsbyclassname(' block ')[0]；封锁。onmouseenter=function(){ clearInterval(时间)；};//鼠标离开事件封锁。onmouseleave=function(){ time=setInterval(function(){ move()；},2000);};//进入索引圈事件for(var j=0；jcircle . lengj){ 0圆圈[j].index=j；圆圈[j].onmouseenter=function(){ for(var k=0；kcirc le。长度；k){圆圈[k]。风格。background COlOr=}这个。风格。背景颜色='红色'；//图片跟随移动盒子，盒子，盒子，盒子.风格。左边距=(-800 *这个。索引)“px”；count=this.index} } //轮播停留方法函数move(){ box。类名='框一个MIT '；圆圈[计数]。风格。background COlOr=计数；盒子。风格。左边距=(-800 * count)' px '；//最后一张走完之后，执行一次定时器不循环，卡过渡时间，消除切换setTimeout(function(){ if(count=6){ count=0；box . name=' box///margin left=0之前去除过渡属性盒子。风格。左边距=' 0px}圈[计数]。风格。背景颜色='红色'；}, 500);} }/script/head body div class=' block ' div class=' box ' img class=' imgg ' src=' http :/image/box 1。jpg ' img class=' imgg ' src=' http :/image/box 2。jpg ' img class=' imgg ' src=' http :/image/box 3。jpg ' img class=' imgg ' src=' http :/image/box 4。jpg ' img class=' imgg ' src=' http :/image/box 5。jpg ' img class=' imgg ' src=' http :/image/box 6。jpg ' img class=' imgg ' src=' http :/image/box 1。jpg/' div class=' cir ' div class=' circle '/div class=' circle '/div class=' circle '/div class=circle '/div class=' circle '/div/div/body/html总结

以上所述是小编给大家介绍的Java脚本语言轮播停留效果的思路详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！