当前位置: 首页 > Web前端 > HTML5

幻灯片的实现方法——W3Schools视频04

时间:2023-04-05 16:42:51 HTML5

幻灯片(Slideshow)是网页常用的功能,今天我们就来看看W3Schools的幻灯片教学。W3SchoolsSlideshowTeachingSlideshowExampleSimplifiedSlideshowExampleVideoLinkB站YouTubeSlideshow(Slideshow)我将幻灯片效果的基本逻辑整理如下:隐藏所有幻灯片图片(display:none);在JavaScript中设置图片索引为1,显示索引指向的图片;在显示每个图像之前,再次隐藏所有图像。当点击左右箭头时,改变索引(left-1,right+1),或者索引超过图片总数,则重新设置为1,反之,则执行图片显示功能。为了突出重点,我简化了W3Schools上的例子,去除了渐变效果、图片文字(Caption)和圆点导航等,只保留最基本的图片和左右箭头。先看HTML,其实就是一个容器,三张图片,加上左右箭头:"宽度:100%">

??
两个箭头都有onclick事件,对应changeSlides函数,只是改变了图片索引。再看看CSS部分:.mySlides{display:none}/*Slideshowcontainer*/.slideshow-container{max-width:1000px;位置:相对;margin:auto;}/*下一个和上一个按钮*/.prev,.next{position:absolute;顶部:50%;宽度:自动;填充:16px;边距顶部:-22px;白颜色;字体粗细:粗体;font-size:18px;}/*将“下一步按钮”定位到右侧*/.next{right:0;}为了将两个箭头放在图片左右两侧的中间,首先设置容器的相对位置,作为箭头绝对的父对象(位置:绝对相对于第一个父元素不是默认元素的元素,即静态)。两个箭头的top设置为50%,让箭头的top出现在图片中心的高度,然后通过负margin-top将箭头向上移动一点,让中间处于图片高度的中心,所以margin-top的负值大约是箭头所占高度的一半。接下来,将向右箭头向右移动:right:0;最后,看看JavaScript部分:varslideIndex=1;showSlides(slideIndex);functionchangeSlides(n){showSlides(slideIndex+=n);}functionshowSlides(n){varslides=document.getElementsByClassName("mySlides");if(n>slides.length){slideIndex=1}if(n<1){slideIndex=slides.length}for(vari=0;i