当前位置： 首页 > Web前端 > HTML

教人分析原生JS写轮播图

时间：2023-04-02 11:07:36 HTML

渔夫式需求与分析需求：无缝循环自动旋转五张图片，按左右箭头手动切换图片，鼠标点击轮播图片下方按钮12345会跳转到对应的12345张图片。当鼠标放在轮播图的图片上时，不再自动旋转，显示左右箭头。当鼠标移开时，左右箭头会隐藏，轮播会自动旋转。效果图：解析：布局：准备七张图片实现所谓的无缝轮播，固定七张图片的宽高。下面假设是600px*400px。假设html分为三个区域：图片区、按钮区、箭头区。然后将这三个区域用div包起来，固定div的宽高为600*400。样式：左右居中，距页面顶部100px显示。五个按钮是圆形的，当旋转图片或点击按钮时，按钮的颜色会发生变化。其余的小样式都是在写代码的时候加上的。JS脚本：只说明一点图片的放置，剩下的我写那部分代码的时候再说。七张图片中，有两张与五张不同图片中的第一张和第五张相同。其中，五张不同图片中与第一张相同的图片放在七张图片中的第七张，五张不同图片中与第五张相同的图片放在第一张图片七张图片中的一张。原因是我写那部分代码的时候会讲到实现步骤1，先来一个html框架

12345
<>
在a标签中加入javascript:void(0)，防止a标签跳变。2、定义样式主要用途：为总div、图片区中按钮区div、图片、按钮、左右箭头定义宽高，使七张图片并排显示，五张按钮显示在图片底部的中央，两个箭头分别指向左侧和右侧，显示在中间位置。/*清除默认样式*/*{margin:0;填充：0；text-decoration:none;}/*totaldiv*/div.container{position:relative;宽度：600px；高度：400px；边距：100px自动0自动；盒子阴影：005px浅绿色；overflow:hidden;}/*图像区域*/div.containerdiv.wrap{position:absolute;宽度：4200px；高度：400px；z-index:1;}div.containerdiv.wrapimg{宽度：600px;高度：400px；float:left;}/*按钮区域*/div.containerdiv.button{position:absolute;右：225px；底部：15px；宽度：150px；高度：20px；z-指数：2；text-align:center;}div.containerdiv.buttonspan{margin-left:5px;显示：内联块；宽度：20px；高度：20px；边界半径：50%；背景色：绿黄色；文本对齐：居中；白颜色;游标：指针；opacity:0.6;}/*旋转到哪张图片，哪个按钮有这个效果，区别于其他按钮。*/div.containerdiv.buttonspan.on{opacity:1;}/*arrowarea*/div.container.jt{position:absolute;顶部：40%；颜色：绿黄色；填充：0px14px；字体大小：55px；文本对齐：居中；z-指数：2；显示：无；}div.container.jt_left{左：10px；}div.container.jt_right{右：10px；}div.container：hover.jt{显示：块；opacity:0.4;}div.container.jt:hover{opacity:1;}为了让页面第一张图片显示1.jpg，所以在图片区域添加一个内联样式，让这张图片默认为在打开的页面上显示：...
此时的效果是这样的。当鼠标移动到图片上时，箭头处有一些样式：3、JS脚本第一步：实现图片的自动切换。封装两个函数：next()和prev()函数，分别对应右旋和左旋。此时无论调用哪个函数，都可以将一张图片往哪个方向移动一张图片就得切换轮播。varwrap=document.getElementsByClassName('wrap')[0];varnewLeft=-600;functionnext(){setInterval(function(){if(newLeft==-2400){newLeft=0;}else{newLeft=parseInt(wrap.style.left)-600;}wrap.style.left=newLeft+'PX';},1000)}functionprev(){setInterval(function(){if(newLeft==-600){newLeft=-3000;}else{newLeft=parseInt(wrap.style.left)+600;}wrap.style.left=newLeft+'PX';},1000)}第二步：让每张图片都有运动轨迹切换代替突然从一张照片换到另一张照片。这里需要用到我封装的一个运动函数startMove()，作为一个工具来使用：}else{返回getComputedStyle(obj,false)[attr];}}//运动帧startMove函数functionstartMove(obj,json,fn){clearInterval(obj.timer);//启动定时器obj.timer=setInterval(function(){varflag=true;//遍历jsonfor(varattrinjson){//获取当前值iCurvariCur=0;if(attr=='opacity'){iCur=Math.round(parseFloat(getStyle(obj,attr))*100);}else{iCur=parseInt(getStyle(obj,attr));}//计算速度：iSpeed//目标值：json[attr]variSpeed=(json[attr]-iCur)/8;iSpeed=iSpeed>0？Math.ceil(iSpeed):Math.floor(iSpeed);//检测停止if(iCur!=json[attr]){flag=false}if(attr=='opacity'){obj.style.filter='alpha(opacity:'+iCur+iSpeed+')';obj.style.opacity=(iCur+iSpeed)/100;}else{obj.style[attr]=iCur+iSpeed+'px';}}if(flag){clearInterval(obj.timer);if(fn){fn();}}},30)}这个封装的motion函数就到这里了，我注释看不懂代码。大家可以去看看这个视频，讲师解释的很清楚：JS动画效果然后利用这个原理：图片向右旋转到第六张图的时候，第一张图马上显示出来，然后打包运动调用函数从第一张图片切换到第二张图片向左旋转时也是如此。当第一个旋转时，第六个立即显示，然后第六个移动到第五个。从视觉上看，五张图片已经循环播放，无缝旋转。这就是为什么要用七张图，第一张图和第六张图一样，第七张图和第二张图一样。.代码如下：varwrap=document.getElementsByClassName('wrap')[0];varnewLeft=-600;functionnext(){setInterval(function(){if(newLeft==-3000){newLeft=0;wrap.style.left=newLeft+'px';}newLeft-=600;startMove(wrap,{"left":newLeft})//wrap.style.left=newLeft+'PX';},3000)}functionprev(){setInterval(function(){if(newLeft==0){newLeft=-3000;wrap.style.left=newLeft+'px';}newLeft+=600;startMove(wrap,{"left":newLeft});},3000)}第三步：当鼠标移到图片上时，停止自动旋转，点击左右箭头数次，控制图片向左右一张张旋转多少张.核心原理：清除定时器，绑定点击、onmouseenter、onmouseleave事件，重构代码封装左右旋转功能和自动旋转功能。向右旋转函数：functionnext(){if(newLeft==-3000){newLeft=0;wrap.style.left=newLeft+'px';}newLeft-=600;startMove(wrap,{"left":newLeft});}向左旋转函数：functionprev(){if(newLeft==0){newLeft=-3000;wrap.style.left=newLeft+'px';}新左+=600;startMove(wrap,{"left":newLeft});}自动播放功能：vartimer=null;functionautoPlay(){timer=setInterval(function(){next();},2000)}/*autoplay*/binding每个事件：container.addEventListener('mouseenter',function(){clearInterval(timer);},false)container.addEventListener('mouseleave',function(){autoPlay();},false)left.addEventListener('click',function(){prev();})right.addEventListener('click',function(){next();})第四步：对按钮进行处理，使得第一次进入页面时，第一个按钮有一个span元素中类是'on'的效果。接下来实现可视化旋转了哪张图片，对应的按钮有类'on'的效果。最后，当你点击一个按钮时，按钮有'on'的效果并跳转到可视图像。封装一个处理按钮的函数。作用是将每个按钮的类名设置为空，然后在视觉移动到第A张图片时，让第A张按钮的类型为'on'。所以需要设置一个sentinelindex来监听图片的可视数，然后给这张图片对应的按钮添加'on'类：//处理按钮varindex=0;varlen=dot.length;函数setCurrentDot(){for(varm=0;m
教人分析原生JS写轮播图相关文章
最新推荐
猜你喜欢

Copyright © 2012-2022 程序源 版权所有豫ICP备2022028201号

重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。 如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。