全球外贸网站制作教程,建设部官方网站有哪些,网站有没有做网站地图怎么看,创办一个app需要多少钱Github - program-learning-lists最近在刷网易云音乐歌单时发现首页的轮播图很有意思#xff0c;正好自己想尝试做一个PC版的网易云音乐#xff0c;于是就是使用Vue去做这个demo#xff0c;废话少说#xff0c;我要出招了#xff0c;接招吧页面的DOM结构:styleslide…Github - program-learning-lists最近在刷网易云音乐歌单时发现首页的轮播图很有意思正好自己想尝试做一个PC版的网易云音乐于是就是使用Vue去做这个demo废话少说我要出招了接招吧页面的DOM结构:stylesliderStylemouseoverpause()mouseoutplay():keyindex:classsetClass(index)clickonClick(index) :stylesetBGImg(item.src):stylesetActiveDot(index)mouseovercurrentIndex indexSlider-container的样式(Stylus).slider-containerwidth: 100%height: 100%text-align: centerpadding: 10px 0position: relative这个子组件主要分为两块。第一块、轮播图其中它们的业务逻辑是自动切换左右icon切换轮播图点击前后轮播图切换轮播图鼠标滑动到轮播图停止轮播离开后继续轮播Slider-content的DOM结构:keyindex:classsetClass(index)clickonClick(index) :stylesetBGImg(item.src)Slider-content的样式(Stylus).slider-contentposition: relativewidth: 100%height: calc(100% - 20px)left: 0%top: 0%margin: 0pxpadding: 0pxbackground-size: inherit.sliderposition: absolutemargin: 0padding: 0top: 0left: 50%width: 65%height: 100%transition: 500ms all ease-in-outbackground-color: #fffbackground-repeat: no-repeatbackground-position: centerbackground-size: inherittransform: translate3d(-50%,0,-80px)z-index: 1:beforeposition: absolutecontent: width: 100%height: 100%top: 0left: 0background-color: rgba(0, 0, 0, 0)transition-delay: 100ms!importanttransition: all 500mscursor: pointer.activetransform: translate3d(-50%, 0, 0)z-index: 20.prevtransform: translate3d(-75%, 0, -100px)z-index: 19.nexttransform: translate3d(-25%, 0, -100px)z-index: 18iwidth: 17.5%display: noneposition: absolutetop: 40%font-size: 22pxcolor: rgba(255, 255, 255, 0.5)text-shadow: 0 0 24px rgba(0, 0, 0, 0.3)cursor: pointerz-index: 21:first-childleft: 0:last-childright: 0:hovericolor: rgba(255, 255, 255, 0.8)display: block.mask.slider.prev, .next:beforebackground-color: rgba(0, 0, 0, 0.50)第二块、底部的dot 其中它们的业务逻辑是当前轮播图对应位置的dot高亮鼠标移动到相应的dot上切换对应位置的轮播图Dots的DOM结构:stylesetActiveDot(index)mouseovercurrentIndex indexDots的样式(Stylus).dotswidth: 100%height: 20pxspandisplay: inline-blockwidth: 20pxheight: 2pxmargin: 1px 3pxcursor: pointer上面是页面的DOM结构和表现的实现代码接下来我们要讲的是连招的实现小心啦我要摸眼W R3了。上面我们讲到轮播图的业务逻辑接下来我们就讲讲如何实现的的吧自动轮播play () {this.pause();if (this.autoPlay) {this.timer setInterval((){this.next();}, this.interval)}}暂停轮播pause () {clearInterval(this.timer);}Icon切换轮播图next () {this.currentIndex this.currentIndex % this.list.length;},prev () {this.currentIndex this.currentIndex 0 ? this.list.length - 1 : this.currentIndex - 1;},前后轮播图的切换轮播图onClick (i) {if (i this.currentIndex){this.$emit(sliderClick, i);} else {let currentClickClassName this.sliderDomList[i].className.split( )[1]console.log(currentClickClassName)if (currentClickClassName next) {this.next()} else {this.prev()}}}dots轮播图的切换轮播图这里比较简单只需要设置它的鼠标事件即可mouseovercurrentIndex index
