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

从零开始写轮播

时间：2023-03-31 00:49:39 CSS

什么是轮播，英文slider，意思是幻灯片，我们可以手动或者自动地一张一张切换照片，达到展示的目的。各大电商网站都会使用轮播展示产品，可以在相对较小的空间内实现多展示。如何实现轮播一般来说，我们可以通过两种方式来实现轮播。比如核心思想是用透明度来切换照片，用距离来平移照片。这里我们使用翻译的方式来实现轮播，通过几组核心数据来实现幻灯片的切换。另外，实现无缝切换的方法一般有很多。需求分解我们实现的轮播，需要的功能可以分为以下几个部分：点击左右箭头，前后无缝切换幻灯片切换轮播点击轮播中的导航按钮，切换不同的幻灯片初始state会每隔3s自动切换幻灯片当鼠标悬停在幻灯片上时，自动轮播停止，移除后恢复自动轮播状态。考虑到复用性，将其抽象为一个组件，其他功能如点击切换等考虑注入到插件中。一、前后切换和无缝切换1、结构和样式我们设置两个容器，在父容器中使用transform左右平移，translateX()相对于自身宽度，在父容器中通过绝对定位平移子容器，其中left属性是相对于父容器的宽度，这样父容器平移100%，子容器向左平移-100%，可以相互抵消。HTML结构如下"slide">

prevnextCSS如下，略删，可以参考源码#m-slider{position:relative;宽度：100%；高度：100%；transform:translateX(-100%);}.slide{position:absolute;}.slide:nth-child(1){left:0%;}.slide:nth-child(2){left:100%;}.slide:nth-child(3){left:200%;}此时我们知道我们可以显示第二张图片。2、前后台逻辑控制数据模型：slideIndex为幻灯片的索引，取值为0、1、2，表示HTML结构中始终只有三张图片。offset表示从当前距离最左边位置开始切换图片的张数，每向后切换一次就会加1，取值范围为1到图片总数接收索引和长度，返回一个len以内的值，其中len固定在3go()方法中，接收1或-1，分别表示向前和向后移动，以向前移动为例，此时两个东西是相关的，所以会更新，而offset的容器将被改变。主要原因是offset和slideIndex会发生变化。两者都需要调用归一化方法使值保持在3以内。calcDistance()方法是计算移动距离的方法，主要包括计算父容器与幻灯片之间的距离。varslider=document.getElementById('m-slider')varslides=document.querySelectorAll('.slide')varprev=document.getElementById('prev');varnext=document.getElementById('next');var幻灯片索引=1;//0,1,2之一varoffset=1;//显示的幻灯片相对于最左边容器的偏移量prev.onclick=function(){go(-1);}next.onclick=function(){go(1);}functionnormalIdx(index,len){return(index+len)%len;}functiongo(foreward){offset+=forward;//向右移动一位，所有偏移量也需要加一位slideIndex+=forward;//向右移动一位，所以加一，需要归一化slideIndex=normalIdx(slideIndex,3);varprevIndex=normalIdx(slideIndex-1,3);varnextIndex=normalIdx(slideIndex+1,3);calcDistance(prevIndex,slideIndex,nextIndex,offset);}functioncalcDistance(prevIndex,slideIndex,nextIndex,offset){slider.style.transform=`translateX(${-100*offset}%)`//console.log(slider.style.transform)console.log(offset)//幻灯片偏移slides[prevIndex].style.left=`${100*(offset-1)}%`;幻灯片[幻灯片Iindex].style.left=`${100*offset}%`;slides[nextIndex].style.left=`${100*(offset+1)}%`;}2.无缝轮播每切换一次，slide的left属性会改变，父容器的transform也会改变，相互抵消，轻松无缝切换。注：我们这里只设置了三张照片，刚好符合要求，相关数据不计算。/**无论旋转多少张照片，只有三列是永久的*------------------*||||*--------------------------------*||||||*||||||*||1|2|3||*||||||*||||||*------------------------------*||||*------------------*/3。面向对象让我们用面向对象的思想重构一下我们之前写的业务代码。HTML有一些变化，我们将Img动态注入
prevnextJS部分，其中`pageNum表示总页数图片，可以是任意数字，renderImg()是渲染图片的方法，主要是切换的时候改变图片的url，第一次需要初始化。//ComponentclassSlider{constructor(el){//省略部分代码this.offset=1;//偏移量，即数字this.slideIndex=1;//slideindex0,1,2之一this.pageIndex=1;//总图片的页面索引this.pageNum=6;//总图片}//对索引进行标准化，使索引始终为0,1,2之一normalIdx(index,len){return(index+长度）%长度；}//slide根据flag移动go(flag){//1.offset和slideIndex改变this.offset+=flag;this.pageIndex+=flag;constslideIndex=this.slideIndex=this.normalIdx(this.slideIndex+=flag,3);//计算移动距离this.calcDistance();}//样式改变calcDistance(){constoffset=this.offset;constslideIndex=this.slideIndex;//索引constprevIndex=this.normalIdx(slideIndex-1,3)constnextIndex=this.normalIdx(slideIndex+1,3)this.pageIndex=this.normalIdx(this.pageIndex,this.pageNum)//2.容器并滑动移动它。合作社ntainer.style.transform=`translateX(${-100*(offset)}%)`;this.slides[prevIndex].style.left=`${100*(offset-1)}%`;this.slides[slideIndex].style.left=`${100*offset}%`;this.slides[nextIndex].style.left=`${100*(offset+1)}%`;//console.log(this.pageIndex,this.slideIndex)this.renderImg(this.pageIndex,this.slideIndex);}renderImg(pageIndex,slideIndex){for(leti=-1;i<=1;i++){constindex=(slideIndex+i+3)%3;//判断图片的url和左漂letimg=this.slides[index].querySelector('img');让picId=this.normalIdx(pageIndex+i,this.pageNum)+1;//页面初始化，运行一次if(!img){img=document.createElement('img');this.slides[index].appendChild(img);}img.src='http://placehold.它/300x200&text='+picId+'-Mint';}}start(){this.bindEvents()this.renderImg(1,1);}}constmySlider=newSlider('m-slider');mySlider。开始（）4。完整版源码e增加了nav功能，点击对应的小按钮可以跳转到指定幻灯片

从零开始写轮播相关文章
最新推荐
猜你喜欢

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

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